html - 拉伸(stretch)图像

Question

我有一个包含任意内容的包装器 div(我不知道它的长度)。由于 background-images 不拉伸(stretch)，我如何放置拉伸(stretch)其整个长度的背景图像？

我试过使用包含 img 标签的 div。该 div 有一个 lover z-index，它包含其余内容，并且有 position: absolute。问题是图像比内容长，所以它只会让它变长(包装器有 overflow: auto)。

<div id="wrapper">
    <div id="image-wrapper" style="position: absolute"><img src="bg.jpg"></div>
    [.. OTHER CONTENT ..]
</div>

如果我将 div 和图像的宽度和高度设置为 100%，它采用窗口的高度，而不是包装器的高度。

有什么帮助吗？

Answer 1

background-size 从 CSS3 开始可用:

#image {
  background-image: url("bg.png");
  background-size: auto;
}

auto 是默认值，不会拉伸(stretch)图像。

您可以手动设置宽度和高度:

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

或

#image {
  background-size: 500px 300px;
}

备选方案:background-size: contain 和 background-size: cover。

contain 拉伸(stretch)图像，使图像尽可能大但在元素内完全可见，而 cover 将图像拉伸(stretch)到 100% 宽度，无论图像在顶部和/或底部被裁剪。

但是不同的浏览器在渲染带有这些关键字的背景时并不完全一致。