拉伸图像

Question

4

我有一个包含任意内容（长度未知）的包装器 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％，它会占用窗口的高度，而不是包装器的高度。

需要帮忙吗？

- pistacchio

4个回答

1

如果您愿意使用 JavaScript，请查看 Supersized。它似乎对于这种特定情况很有效。

- Juho Vepsäläinen

0

你也可以尝试使用HTML5的图像方法。

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

- vonsko

这与HTML5无关，纯粹是CSS。你想表达的是响应式设计中用于将图像缩放到容器大小的方法。 - Luca

0

在 #wrapper 的样式中添加 position: relative。

- Blazemonger

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alp · Accepted Answer

background-size 是 CSS3 中的新属性：

#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％宽度，不管图像是否被剪裁在顶部和/或底部。

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