背景图片未完全拉伸

Question

前几天我刚刚发布了一个网站，认为它没有奇怪的CSS错误，但显然不是这样。我的目标是将图像在高度和宽度上拉伸以适应页面。

问题：我有以下标记：

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

并应用以下CSS：

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

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

我尝试了许多CSS更改，但无法完全拉伸。如果您有任何帮助，将不胜感激。

如果需要，我可以执行以下任何操作：

- 使用Photoshop更改图像尺寸 - 添加任何JS或CSS，但是height: 100％解决方案不起作用，至少我看不出来。

您可以在此URL上进行测试：http://bit.ly/eOEzXJ。

- Evert

---

你可能需要重新表达一下。看起来你试图让一个元素的背景拉伸，这是无法通过CSS实现的。 - user229044

如果您想要重复图像，就不应该拉伸它，而应该始终使用背景重复。 - kobe

@gov，感谢您的评论！然而，如果您查看链接，您会发现我并不是在尝试重复一张图片，而是要拉伸一张图片以适应页面..这张图片应该足够大才能做到这一点。 - Evert

Answer 1

尝试以下操作：

body {
   height: 100%;
}

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

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

#wrapper {
   height: 100%;
}

- Chuck Callebs

---

为了解释一下，您的图像高度正在进行缩放以保持原始纵横比。这通常不足以容纳长文档。您可以考虑让图像向底部渐变为平面颜色。 - user229044

谢谢您的回答 :-) 不幸的是，这似乎并没有解决问题.. - Evert

Answer 2

Chuck的想法是正确的，但你可能需要添加一些内容

html {
    height: 100%;
}

同样也是如此。

- Rob Williams

Answer 3

你可能想在HTML中将img标签的高度和宽度设置为100％

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

- Kobby