Question

我有一个html页面，中间有一张照片有没有办法用javascript缩小图像，以防它对于当前的显示器分辨率来说太大了？

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

我可以使用jquery

Answer 1

为什么不使用css？

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

Answer 2

请看这里：Image resize to fit screen

其他：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);
    }

});

});

如果图像对于屏幕而言太大，则缩小图像

2 个答案: