SVG不遵循背景大小100% 100%

Question

我有一张SVG图片，希望它能够完全覆盖一个容器，并保持其独特的边缘。使用background-size: 100% 100%; 看起来是最完美的选择，虽然它对普通图像有效，但在这种情况下无效。为什么？（jpeg摘自James的答案）

html, body {
  background-color: #ddd;
}
.container {
  margin: 20px; padding: 20px; border: 1px solid #000;

  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.container.svg {
  background-image: url(https://svgshare.com/i/RWM.svg);
}
.container.img {
  background-image: url(https://images.pexels.com/photos/370799/pexels-photo-370799.jpeg?auto=compress&cs=tinysrgb&h=350);
}

<div class="container svg">
  some<br>content<br>makes<br>this<br>large
</div>
<div class="container img">
  some<br>content<br>makes<br>this<br>large
</div>

- kero

---

这很令人困惑，你所说的“填充整个区域”是指覆盖整个区域吗？ - Rainbow

@ZohirSalakCeNa cover会等比例缩放图像，但我的图片有非常特定的边缘，我想保持所有边缘可见。 - kero

Answer 1

好的，我在阅读了几个其他帖子后终于弄清楚了 - 其中包括一些它能正常工作的帖子。

罪魁祸首是<svg>定义中的viewBox。当我将其移除后，图像就按照应有的比例缩放了。对于Safari，我需要添加preserveAspectRatio="none"。

之前：

<svg width="392px" height="499px" viewBox="0 0 392 499" ...

之后：

<svg width="392px" height="499px" preserveAspectRatio="none" ...

html, body {
  background-color: #ddd;
}
.container {
  margin: 20px; padding: 20px; border: 1px solid #000;

  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.container.svg {
  background-image: url(https://svgshare.com/i/RWM.svg);
}
.container.img {
  background-image: url(https://svgshare.com/i/RWv.svg);
}

<div class="container svg">
  some<br>content<br>makes<br>this<br>large
</div>
<div class="container img">
  some<br>content<br>makes<br>this<br>large
</div>

- kero

Answer 2

background-size: 100% 100%;可以解决你的问题。请检查代码是否没有错误。

这是一个fiddle示例：https://jsfiddle.net/7pn3cvh3/

- James

---

它与我的SVG不兼容，我会重新表述问题。 - kero

在这种情况下，您可以有三种方法来处理：1.将其导出为高分辨率PNG格式，它仍然具有良好的质量，并且可以与background-size: 100% 100%;一起使用。2.将SVG分成两个SVG（垂直和水平），并将它们用作CSS中的:before和:after元素，并使用background-position: contain; 3.使用jQuery测量div的高度，并将尺寸输出到DOM作为style="background-size: ***px ***px"; - James

我喜欢SVG的小尺寸，所以高分辨率PNG不是一个好的选择。无论如何，从代码中删除viewBox就解决了问题。 - kero