I am trying to make fullscreen images with jquery when the window resize
function is triggered. But I get this kind of result - where you can see a gap at the bottom of the image which I don't know how to fix it.
the basic html,
<!-- container -->
<div id="container" class="container">
<div class="holder-supersize" id="supersize">
<ul class="background-supersize">
<li><a href="#"><img src="styles/images/IMG_0250.jpg" alt="" width="1000" height="667" /></a></li>
<li><a href="#"><img src="styles/images/IMG_0255.jpg" alt="" width="667" height="1000" /></a></li>
<li class="active"><a href="#"><img src="styles/images/IMG_0323.jpg" alt="" width="1158" height="772" /></a></li>
</ul>
</div>
</div>
<!-- container -->
jquery for updating image size on window resize,
$(document).ready(function(){
$(window).resize(function(){
$(".holder-supersize").each(function() {
//Define image ratio & minimum dimensions
var minwidth = .5*(640);
var minheight = .5*(480);
var ratio = 480/640;
//Gather browser and current image size
var imagewidth = $(this).width();
var imageheight = $(this).height();
var browserwidth = $(window).width();
var browserheight = $(window).height();
//Check for minimum dimensions
if ((browserheight < minheight) && (browserwidth < minwidth)){
$(this).height(minheight);
$(this).width(minwidth);
}
else
{
//When browser is taller
if (browserheight > browserwidth){
imageheight = browserheight;
$(this).height(browserheight);
imagewidth = browserheight/ratio;
$(this).width(imagewidth);
if (browserwidth > imagewidth){
imagewidth = browserwidth;
$(this).width(browserwidth);
imageheight = browserwidth * ratio;
$(this).height(imageheight);
}
}
//When browser is wider
if (browserwidth >= browserheight){
imagewidth = browserwidth;
$(this).width(browserwidth);
imageheight = browserwidth * ratio;
$(this).height(imageheight);
if (browserheight > imageheight){
imageheight = browserheight;
$(this).height(browserheight);
imagewidth = browserheight/ratio;
$(this).width(imagewidth);
}
}
}
return false;
});
});
});
CSS for supersize image
/* Supersize -------------------------------------------*/
.holder-supersize {
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:0;
}
.background-supersize {
width:100%;
height:100%;
overflow:hidden;
position:relative;
}
.background-supersize li {
width:100%;
height:100%;
overflow:hidden;
position:absolute;
left:0;
top:0;
text-align:center;
}
.background-supersize li img {
/* for image with height < width */
/**/
width:100%;
height:auto;
/* for image with height > width */
/*
width:auto;
height:100%;
*/
}
.background-supersize li ,
.background-supersize a,
.background-supersize img{
display:none;
}
.background-supersize .active,
.background-supersize .active a,
.background-supersize .active img{
display:inline;
}
This is the link at jsfiddle and this is the link to see the actual product.
Any ideas what I have done wrong and how can I fix it?
