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

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

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

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

• javascript
• image
• image-resizing

• 3 Full screen or full window? – Nicole Commented Nov 16, 2011 at 20:14

3 Answers 3

The only reliable solution is to use a formula to determine maximum scale ratio:

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
});

If you have it outside of all elements you can just 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>

You can use viewerjs which is perfict library to able users to browse your images to view fullpage and fullscreen, slide them and view slide between them check this link : https://github./fengyuanchen/viewerjs