背景图像未完全拉伸答案

【问题标题】：Background image not stretching fully背景图像未完全拉伸
【发布时间】：2010-12-08 05:03:33
【问题描述】：

前几天我刚刚启动了一个网站，并认为它没有奇怪的 CSS 错误，但显然不是。我在这里尝试做的是拉伸图像以适应页面的高度和宽度。

问题： 我有以下标记：

<img src="images/night_sky7.jpg" class="stretch" />

并对其应用以下 CSS：

img.stretch { 
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
}

这在我的 17.1 英寸笔记本电脑上运行良好，分辨率为 1440x900，但我注意到它在其他屏幕分辨率上无法正常运行。发生的情况是背景不会延伸到底部，而是延伸到底部下方甚至页面中间。

现在，我尝试更改很多 CSS，但无法完全拉伸。

感谢任何帮助。

如果您愿意，可以测试的网址是：http://bit.ly/eOEzXJ。

如有必要，我可以做以下任何事情：

【问题讨论】：

【解决方案1】：

Chuck 在这里是正确的，但您可能需要添加

html {
    height: 100%;
}

也是。

【讨论】：

【解决方案2】：

尝试这样做：

body {
   height: 100%;
}

img.stretch {
   // your stuff
   height: 100%
}

我注意到您还有一个包装 CSS 类。您还需要添加以下内容：

#wrapper {
   height: 100%;
}

【讨论】：

【解决方案3】：

您可能只想将 html 中 img 标签的高度和宽度设置为 100%

<img src="images/night_sky7.jpg" class="stretch" width="100%" height="100%"/>

【讨论】：