CSS or jQuery scalable background image with NO white space underneath when img height is less than window height

问题

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.

回答1:

You can use something like:

selector {
  background: url(bgimage.jpg) no-repeat;
  background-size: 100%;
}

but it has browser incompatibilities.

.
Alternative solutions will force you to use HTML.

Examples:

Stretch and scale a CSS image in the background - with CSS only
http://webdesign.about.com/od/css3/f/blfaqbgsize.htm

回答2:

css:

#wallpaper {position:absolute; width:100%; height:100%; top:0; left:0; z-index:0}
#wallpaper img {height:100%; width:100%; margin:0 auto;}

html:

<div id="wallpaper"><img src="bg.jpg"></div>

回答3:

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/

回答4:

Here you go. Using jQuery. IMG tag is set as the background image by using position:absolute; z-indez:0; As you resize the window the image will resize accordingly. Cross browser compatible.

$(window).resize(function(){
    var bgwidth = $(window).width(),
    bgheight= $(window).height();
    $('img').attr({width:bgwidth, height:bgheight});
})