当img高度小于窗口高度时，CSS或jQuery可缩放背景图像下面没有空白 [英] CSS or jQuery scalable background image with NO white space underneath when img height is less than window height

问题描述

老歌，但老兄，我知道.这个问题被问了很多遍了，但是我还没有一个明确的答案.可伸缩的背景图片，最好仅是CSS，如果需要的话，愿意使用jQuery作为支持.我遇到很多问题(即CSS3背景图像)是当图像的高度小于浏览器窗口高度时图像下方的空白区域. (示例: http://css-tricks.com/examples/ImageToBackgroundImage/)

这就是我想要完成的事情:

• 保持宽高比
• 如果浏览器窗口小于图像大小，则剪切图像的高度和宽度
• 图片以页面为中心，因此剪切不会抵消页面的流量

以下是一些说明这些目标的示例(尽管我认为可以做得更好):

• http://www.thakoon.com/collections/thakoon-加法/2011年秋季前
• http://whatstheweather.net/weather/submit

谢谢你， 谢谢， 谢谢.

解决方案

被朋友推荐使用Supersize，这正是我在寻找的东西！使用核心功能代替幻灯片版本. http://www.buildinternet.com/project/supersized/

Oldie but goodie, I know. This question is asked so many times and yet I haven't had a definitive answer. Scalable background image, preferably CSS only, willing to use jQuery in support if it's a must. A problem I've run into a lot (i.e. with CSS3 background-image) is empty space underneath an image when it's height is less than the browser windows height. (example: http://css-tricks.com/examples/ImageToBackgroundImage/)

Here's what I'd like to accomplish:

• Maintain aspect ratio
• Clip image height and width if browser window is smaller than image size
• Image centered on page so the clipping doesn't offset the flow of the page

Here are some examples illustrating these goals (though I think it can be done better):

• http://www.thakoon.com/collections/thakoon-addition/pre-fall-2011
• http://whatstheweather.net/weather/submit

Thank you, Thank you, Thank you.

解决方案

Was recommended Supersize by a friend- it was exactly what I was looking for! Used the core function instead of the slideshow version. http://www.buildinternet.com/project/supersized/

这篇关于当img高度小于窗口高度时，CSS或jQuery可缩放背景图像下面没有空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！