Stretch Background Image & Resize With Browser Window
- by user241673
I am trying to replicate the image resizing found at http://devkick.com/lab/fsgallery/ but with the code I have below, it is not working properly. When resizing the browser window to have small width and big height, white space shows up at the bottom of the page.
feel free to see it & edit at http://jsbin.com/ifolu3
The CSS:
html, body {width:100%; height:100%; overflow:hidden;}
div.bg {position:absolute; width:200%; height:200%; top:-50%; left:-50%;}
img.bg {min-height:50%; min-width:50%; margin:0 auto; display:block;}
The JS/jQuery:
$(window).resize(function(){
var ratio = Math.max($(window).width()/$('img.bg').width(),$(window).height()/$('img.bg').height());
if ($(window).width() $(window).height()) {
$('img.bg').css({width:image.width()*ratio,height:'auto'});
} else {
$('img.bg').css({width:'auto',height:image.height()*ratio});
}
});
The HTML - (sorry for the formatting, had trouble getting "<" to show)
[body]
[div class="bg"]
[img class="bg" src="bg.jpg" /]
[/div]
[/body]
