Question

我有一个包含div的包装器，其中包含任意内容（我不知道它的长度）。如果背景图像不伸展，我怎样才能放置一个延伸其整个长度的背景图像？

我尝试使用包含div标记的img。 div有一个情人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

从CSS3开始，

background-size可用：

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

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

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

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

或

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

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

contain拉伸图像，使图像尽可能大，但在元素内完全可见，而cover将图像拉伸至100％宽度，无论图像是否在顶部裁剪和/或底部。

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

Answer 2

如果您愿意使用JavaScript，请查看Supersized。它似乎适用于这种特殊情况。

Answer 3

您也可以在图片上尝试html5方法。

#image-wrapper img {max-width: 100%}

Answer 4

将position: relative添加到#wrapper的样式。