¿Cómo escalar una imagen a pantalla completa usando JavaScript?

Question

Tengo una imagen que me gustaría escalar a pantalla completa. ¿Cómo haría esto usando JavaScript/jQuery? No es necesaria ninguna animación, solo cambia el tamaño de la imagen.

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

Answer 1

La única solución fiable es utilizar un 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 
}); 

Answer 2

Si lo tienes fuera de todos los elementos que sólo puede utilizar CSS: <img src="something.jpg" style="width:100%; height:100%" onload="scaleToFullScreen()" />

si no lo hace:

<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>