如何将背景图片（SVG）拉伸至100％宽度和100％高度？

Question

我想实现的效果是将图片按比例拉伸，使其宽度与background-size:cover;相同，高度与background-size:contain;相同。我认为background-size:100%;应该可以达到这个效果，但看看这个例子——它并没有做到这一点。

.container {
   background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg");
   background-position:center center;
   background-repeat:no-repeat;
   width:300px;
   height:180px;
   background-color:#eef;
   border-bottom:1px solid #000;
}

#container1 {
  background-size:contain;
}

#container2 {
  background-size:cover;
}
#container3 {
  background-size:100%;
}

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

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

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

我该如何实现期望的“拉伸”效果？

- Blackbam

Answer 1

所选答案是正确的，但有点不完整：以下是原因...

如果要让背景SVG图像拉伸并填满整个容器，重要的是要注意SVG必须允许这种情况发生。在SVG中，请确保旁边添加 ' preserveAspectRatio="none" ' 到视口。

因此，请使用：

background-size: 100% 100%;

在 SVG 中，确保其外观类似于以下内容：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 100" preserveAspectRatio="none">

- Rmaxx

---

哎呀，我还以为自己疯了，因为故意拉伸SVG作为背景图片就是不行——直到我意识到这一定与SVG本身有关。感谢你指出来！ - physalis

preserveAspectRatio="none" 是我需要的。谢谢。 - undefined

Answer 2

使用background-size: 100%;实际上意味着background-size: 100% auto;。请同时使用宽度和高度值：background-size: 100% 100%;

仅使用宽度值，此时高度默认为auto。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Syntax

.container {
   background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg");
   background-position:center center;
   background-repeat:no-repeat;
   width:300px;
   height:180px;
   background-color:#eef;
   border-bottom:1px solid #000;
}

#container1 {
  background-size:contain;
}

#container2 {
  background-size:cover;
}
#container3 {
  background-size: 100% 100%;
}

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

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

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

- myf

Answer 3

这应该可以工作：

background-size: 100% 100%;

.container {
   background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg");
   background-position:center center;
   background-repeat:no-repeat;
   width:300px;
   height:180px;
   background-color:#eef;
   border-bottom:1px solid #000;
}

#container1 {
  background-size: 100% 100%;
}

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

- abney317