jQuery 让图片等比例缩小，让所有图片都等比例缩小

　有时候我们需要控制图片的大小不超过容器的指定宽度，这时我们就需要用jQuery来完成对图片大小的等比例缩小显示，且能点击再放大。我们可以把 ResizeImage(this,520); 这段代码放在img元素的onclick中，再把下面代码放入你的js文件中，就可以实现了。

调用方法：

ResizeImage(this,520);

 

代码如下：

//*********************************************************

// 目的：    图片自动缩小 点击放大

// 输入：    无

// 返回：    无

//*********************************************************

function ResizeImage(objImage,maxWidth) {

try{

if(maxWidth>0){

var objImg = $(objImage);

if ( objImg.width() > maxWidth ) {

var oldwidth = objImg.width();

var oldheight = objImg.height();

var newheight = maxWidth / oldwidth * oldheight;

objImg.css( { width:maxWidth+"px", height:newheight+"px", cursor:"pointer" } );

objImg.attr( "title", "点击查看原图" );

objImg.click(function(){ window.open( $(this).attr("src") ); });

}

}

}catch(e){};

}

 

　　如果你要对指定容器内所有图片都等比例缩小，可以参照下面的代码：

$(function() {

    $(".dvcontent img").each(function() {

        var maxwidth = 520;

        if ($(this).width() > maxwidth) {

            var oldwidth = $(this).width();

            var oldheight = $(this).height();

            var newheight = maxwidth/oldwidth*oldheight;

            $(this).css({width:maxwidth+"px",height:newheight+"px",cursor:"pointer"});

            $(this).attr("title","点击查看原图");

            $(this).click(function(){window.open($(this).attr("src"))});

        }

    });

});