I'm using the following function to resize my images when I resize my browser's window:
function resize_image(a){
$(a).on("load",function(){
var b;
var d=$(this).width()/$(this).height();
var c=$(this).parent().width() / $(this).parent().height();
if(d<c){
b={width:"auto",height:"100%"}
}else{
b={width:"100%",height:"auto"}
}
$(this).css(b)
})
};
That function are only working if you don't have any fixed height or width on the element. I want to have the image in a DIV tag so I can have a background-color/image that indicates that the image is loading, rather than a invisible image (as it is now).
Why I want to have a manual height that have the same height as the image, is because I have some contents under the image. When the website is loading the image, the content are at top of the website (top = 0). When the image has been loaded, the content pops down so it's under the image. I want to prevent this because the image can load a bit slow sometimes because of the web hosting and it looks kinda weird when the content are visible but not the image.
Now to my question. Is it possible to have a manual height in a DIV tag with this function, and the image resizing correctly according to the browser's window size?