Come ridimensionare un'immagine a schermo intero usando JavaScript?

Question

Ho un'immagine che desidero ridimensionare a schermo intero. Come dovrei farlo usando JavaScript/jQuery? Nessuna animazione è necessaria, basta ridimensionare l'immagine.

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

Answer 1

L'unica soluzione affidabile è quello di utilizzare 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

Se si dispone al di fuori di tutti gli elementi si può semplicemente utilizzare i CSS: <img src="something.jpg" style="width:100%; height:100%" onload="scaleToFullScreen()" />

se non lo fai:

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