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添加显式维度可实现背景缩放。感谢您的答复
我是一名优秀的程序员,十分优秀!