Làm cách nào để chia tỷ lệ hình ảnh thành toàn màn hình bằng JavaScript?

Question

Tôi có một hình ảnh mà tôi muốn chia tỷ lệ thành toàn màn hình. Làm thế nào tôi sẽ làm điều này bằng cách sử dụng JavaScript/jQuery? Không có hoạt ảnh là cần thiết, chỉ cần thay đổi kích thước hình ảnh.

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

Answer 1

Các giải pháp đáng tin cậy duy nhất là sử dụng một 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

Nếu bạn có nó bên ngoài của tất cả các yếu tố mà bạn chỉ có thể sử dụng css: <img src="something.jpg" style="width:100%; height:100%" onload="scaleToFullScreen()" />

nếu bạn không:

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