为什么在这个SVG上使用background-size:100% 100%无效？

Question

看看这个例子：

.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>

相关问题：如何将背景图片（SVG）拉伸至100%宽度和100%高度？

（提示：SVG是一种矢量图形格式，可缩放而不失真，可用于网页设计中的图像和图标）

- Blackbam

---

我相信你必须在容器内使用100％嵌套另一个元素。 - Coastal-Cam

在我的实际例子中，这也不起作用。可能是某些SVG文件出了问题？ - Blackbam

http://jsfiddle.net/JknDr/123/ - 这在Chrome上对我有效。如果高度是问题，是的，您可能需要找到一个更比例缩放的SVG。 - Coastal-Cam

Answer 1

打开你的.svg文件并在SVG标签内设置

preserveAspectRatio="none"

。

- holden

---

找到相关内容：https://dev59.com/LGox5IYBdhLWcg3wOyD9 - Blackbam

这让我疯狂了。谢谢你提供的解决方案！ - Sam

Answer 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>

- Julio Feferman