如果图像对屏幕来说太大，可以缩小它

Scale down an image if it's too big for the screen

本文关键字：缩小 图像 屏幕 如果      更新时间：2023-09-26

我有一个html页面，中间有一张图片。
是否有一种方法来缩小与javascript的图像，以防它太大，目前的显示器分辨率?

我的意思是，如果一个分辨率为1600*1200的用户打开一个1900*1200的图像，图像应该按比例缩小以适合窗口。

我可以使用jquery

为什么不用css呢?

.imgresize {
    max-width: 100%;
    max-height: 100%;        
}

看这里:图像大小调整到适合屏幕

其他:http://jsfiddle.net/jsNDW/1/

HTML 

<img src="http://placehold.it/1950x550" class="imgresize">
JQUERY

和

var wWidth = $(window).width();
var wHeight = $(window).height();
$('.imgresize').each( function() {
var imgWidth = $(this).width();
var imgHeight = $(this).height();
    if(imgWidth >  wWidth)
    {
        $(this).width(wWidth);
    }
    if(imgHeight >  wHeight )
    {
        $(this).width(wHeight);
    }
});

$(window).resize(function() {
var wWidth = $(window).width();
var wHeight = $(window).height();
$('.imgresize').each( function() {
var imgWidth = $(this).width();
var imgHeight = $(this).height();
    if(imgWidth >  wWidth)
    {
        $(this).width(wWidth);
    }
    if(imgHeight >  wHeight )
    {
        $(this).height(wHeight);
    }
});
});
相关文章：