gpt4 book ai didi

Scale SVG to container when used in `background-image`(在`背景-图像`中使用时,将SVG缩放为容器)

转载 作者:bug小助手 更新时间:2023-10-24 22:47:00 25 4
gpt4 key购买 nike



I am trying to use an SVG as background on a container.
This background should stretch to cover whole container, no need to keep aspect ratio.
Just all the edges of the svg should align with the container edges.

我正在尝试使用SVG作为容器的背景。这个背景应该延伸到覆盖整个容器,不需要保持纵横比。只要SVG的所有边缘都应该与容器边缘对齐。


I look through other questions and tried adding:

我看了看其他问题,试着补充道:


In svg

在SVG中


preserveAspectRatio="none" with viewbox="0 0 1200 638"

PreserveAspectRatio=“None”,Viewbox=“0 0 1200 638”


In css

在css中


background-size: 100% 100%;

背景尺寸:100%100%;


Heres link to example on codesanbox

这里链接到codesanbox上的示例


Given the code from the sandbox above what should I do to enable the described behaviour of background ?

给出上面沙箱中的代码,我应该怎么做才能启用所描述的后台行为?


更多回答
优秀答案推荐

According to here:

根据这里的说法:



Note: Background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers. Be careful about relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable.



Add width="1200px" height="637px" to your SVG and you should be golden.

将Width=“1200px”Height=“637px”添加到您的SVG中,您应该是黄金级的。


更多回答

Adding explicit dimensions to SVG enabled background scaling. Thank you for your answer

向SVG添加显式维度可实现背景缩放。感谢您的答复

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com