How to scale image in full screen using javascript?

Question

I have an image that I would like to scale to full screen. How do I do this using JavaScript / jQuery? No animation needed just by resizing the image.

<img src="something.jpg" onload="scaleToFullScreen()" /> 

Answer 1

The only reliable solution is to use the formula to determine the maximum scaling factor :

 var $img = $('#content img'), imageWidth = $img[0].width, //need the raw width due to a jquery bug that affects chrome imageHeight = $img[0].height, //need the raw height due to a jquery bug that affects chrome maxWidth = $(window).width(), maxHeight = $(window).height(), widthRatio = maxWidth / imageWidth, heightRatio = maxHeight / imageHeight; var ratio = widthRatio; //default to the width ratio until proven wrong if (widthRatio * imageHeight > maxHeight) { ratio = heightRatio; } //now resize the image relative to the ratio $img.attr('width', imageWidth * ratio) .attr('height', imageHeight * ratio); //and center the image vertically and horizontally $img.css({ margin: 'auto', position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }); 

Answer 2

If you have this outside of all the elements, you can simply use css: <img src="something.jpg" style="width:100%; height:100%" onload="scaleToFullScreen()" />

if you do not:

 <img name='myImage' src="something.jpg" onload="onResize()" /> <script> window.onresize = onResize; function onResize(e){ var img = var img = document.images.myImage; if ( img.width > img.height ) img.width = window.innerWidth else img.height = window.innerHeight; } </script>