Question

我想要实现的行为是background-size:cover;的宽度，但是background-size:contain;的高度是通过拉伸图像来实现的。我认为background-size:100%;应该这样做，但请看一下这个例子 - 它没有。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

如何实现所需的 - 拉伸 - 结果？

Answer 1

所选答案是正确的，但是，有些不完整：这就是为什么...

如果您希望背景 SVG 图像拉伸并填充整个容器，请务必注意 SVG 必须允许这种情况发生。在 SVG 中，确保在视口旁边添加了“preserveAspectRatio="none"”。

所以使用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="countcontent">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

在 SVG 中确保它看起来像这样：

background-size: 100% 100%;

Answer 2

这应该有效：

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>

Answer 3

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

仅使用宽度值，在这种情况下，高度默认为自动。

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>

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

3 个答案: