背景图像拉伸不充分 [英] Background image not stretching fully

问题描述

我刚刚推出一个网站，有一天，以为是免费的怪异CSS的错误，但显然事实并非如此。我想在这里做的就是伸展图像的高度和宽度以适合页面。

I just launched a website the other day and thought it was free of weird CSS mistakes, but apparently it's not. What I am trying to do here is stretching an image to fit the page in height and width.

问题：
我有以下标记：

The problem: I have the following markup:

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

和适用于它下面的CSS：

and the following CSS applied to it:

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

这是工作在我的17.11440x900的与笔记本电脑的分辨率很好，但我发现它并没有在其他的屏幕分辨率正常工作。什么情况是，背景不拉伸的底部，但略低于底部或甚至页的中间

This is working fine on my 17.1' laptop with 1440x900 resolution, but I noticed it doesn't work properly on other screen resolutions. What happens is that the background does not stretch to the bottom, but to just below the bottom or even to the middle of the page.

现在，我已经试图改变很多CSS的，但我不能让它充分伸展。

Now, I've tried changing a lot of CSS, but I can't get it to fully stretch.

任何帮助是AP preciated。

Any help is appreciated.

您可以测试的，如果你想要的网址是： http://bit.ly/eOEzX​​J

The url you could test on if you'd want is: http://bit.ly/eOEzXJ.

如果有必要，我可以做任何一件事：

• 在Photoshop中改变图像的任意维度


• 添加任何JS或CSS，但高度：100％;解决方案不起作用，至少，不是因为我可以看到

推荐答案

试着做这样的：

body {
   height: 100%;
}

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

我注意到你也有一个包装CSS类。你还就需要补充一点：

I noticed you also have a wrapper CSS class. You'd also need to add this:

#wrapper {
   height: 100%;
}

这篇关于背景图像拉伸不充分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！