拉伸图像

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

我试过用div包含img标签。该div有一个情人z-索引，其余的内容和position: absolute。问题是，图像的内容更长，所以它只是使它更长（包装有overflow: auto）。

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

如果我设置div和图像的宽度和高度为100％，它需要该窗口的高度，而不是包装的。

任何帮助？

来源

2012-03-19 pistacchio

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

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

来源

2012-03-19 15:50:21 Alp

'auto'是默认的，'cover'＆'contain'将拉伸BG图像，但不要在[IE <= 8]（http://www.standardista.com工作/ css3/css3-background-properties /＃bg11），FF <4需要“-moz”前缀。 – JKirchartz 2012-03-19 15:56:20

感谢您的输入，我在我的回答中更正了它 – Alp 2012-03-19 15:57:43

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

来源

2012-03-19 15:51:02

你也可以尝试在图像上使用html5方法。

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

来源

2012-03-19 15:59:45 vonsko

这与HTML5无关 - 它是纯粹的CSS。您要说的是，这是在响应式设计中将图像缩放到容器大小的方法。 – Luca 2012-11-15 00:58:40

添加position: relative的样式#wrapper。

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

来源

2012-03-19 16:06:58 Blazemonger

回答

相关问题