为啥 background-size:100% 100%;不适用于此 SVG？

Posted 2023-03-06

【中文标题】为啥 background-size:100% 100%;不适用于此 SVG？

【英文标题】：Why does background-size:100% 100%; not work on this SVG?为什么 background-size:100% 100%;不适用于此 SVG？

【发布时间】：2018-04-09 07:18:07

【问题描述】：

看例子：

.container 
   background-image:url("http://svgshare.com/i/3cM.svg");
   background-position:center center;
   background-repeat:no-repeat;
   width:400px;
   height:200px;
   background-color:#eef;
   border-bottom:1px solid #000;
   background-size:100% 100%;

<div id="container1" class="container"></div>

相关问题：Stretch a background image (SVG) to 100% width and 100% height?

【问题讨论】：

我相信你必须使用 100% 在容器中嵌套另一个元素

嗯，在我的实时示例中，这也不起作用。一定是某些 SVG 文件有问题？

jsfiddle.net/JknDr/123 - 这适用于我在 Chrome 上。如果高度是问题，是的，您可能需要找到一个按比例缩放的 svg。

【参考方案1】：

打开您的 .svg 文件并设置

preserveAspectRatio="none"

在 SVG 标签内。

【讨论】：

找到相关的：***.com/questions/9334095/…

这让我发疯了。谢谢你的解决方案！

【参考方案2】：

按照评论中的建议，将 svg 容器包装在另一个容器中，并为包装器提供所需的尺寸。在这种情况下，我将包装器设置为100vw 宽度和100vh 高度。更改包装器尺寸并注意 svg 将随之而来。

html, body 
  padding:0;
  margin:0;


.wrapper 
  width:100vw;
  height:100vh;


.container 
   background-image:url("http://svgshare.com/i/3cM.svg");
   background-position:center center;
   background-repeat:no-repeat;
   width:100%;
   height:100%;
   background-color:#eef;
   border-bottom:1px solid #000;
   background-size:100% 100%;

<div class="wrapper">
  <div id="container1" class="container"></div>
</div>