为什么 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%;
}

&lt;div id="container1" class="container"&gt;&lt;/div&gt;

【问题讨论】：

我相信你必须使用 100% 在容器中嵌套另一个元素
嗯，在我的实时示例中，这也不起作用。一定是某些 SVG 文件有问题？
jsfiddle.net/JknDr/123 - 这适用于我在 Chrome 上。如果高度是问题，是的，您可能需要找到一个按比例缩放的 svg。

标签： html css svg background-image stretch

【解决方案1】：

打开您的 .svg 文件并设置

preserveAspectRatio="none"

在 SVG 标签内。

【讨论】：

找到相关的：stackoverflow.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>

【讨论】：