我想要实现的行为是 background-size:cover;
的宽度,但是 background-size:contain;
的高度通过拉伸(stretch)图像。我认为 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>
我怎样才能达到预期的-拉伸(stretch)-结果?
最佳答案
选择的答案是正确的,但有些不完整:这就是为什么...
如果您希望背景 SVG 图像拉伸(stretch)并填充整个容器,请务必注意 SVG 必须允许这种情况发生。在 SVG 中,确保在视口(viewport)旁边添加了“preserveAspectRatio="none"”。
所以使用:
background-size: 100% 100%;
在 SVG 中确保它看起来像这样:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 100" preserveAspectRatio="none">
关于html - 将背景图像 (SVG) 拉伸(stretch)到 100% 宽度和 100% 高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46978834/