Menu
Hi,
I’ve been messing about with some javascript to ensure my image fills the entire height of the screen when resized.
However, I also want to set a min height which is controlled by an if statement. I.e. IF browser height is resized to less than 900px do not shrink the image any further as it would make the site too small.
I’m sure it is really basic to do but i’m struggling like mad!
Here is my code, any advice or solutions would be brill as i’m currently pulling my hair out.
(oh yeah… img.source-image is the class of the resizing image)
<script type=”text/javascript”>
$(document).ready(function() {
var $winheight = $(window).height();
$(“img.source-image”).attr({
height: $winheight
});
$(window).bind(“resize”, function(){
var $wineheight = $(window).height();
var test = $wineheight
if(test<900)
{
document.getElementById(“img.source-image”).style.minHeight=”900px”;
}
$(“img.source-image”).attr({
height: $wineheight
});
});
});
</script>