[jQuery] 按比例缩小图片

其实网上有很多教程的，不过他们基本只是提供如下代码：

/*

*

*/

$('.public-leftimg').each(function(){

varx=100;//填入目标图片宽度

vary=100;//填入目标图片高度

varw=$(this).width();

varh=$(this).height();//获取图片宽度、高度

if(w>x){//图片宽度大于目标宽度时

varw_original=w,h_original=h;

h=h*(x/w);//根据目标宽度按比例算出高度

w=x;//宽度等于预定宽度

if(h<y){//如果按比例缩小后的高度小于预定高度时

w=w_original*(y/h_original);//按目标高度重新计算宽度

h=y;//高度等于预定高度

}

}

$(this).attr({width:w,height:h});

});

直接这样使用的话，我们拿到的 $(this).width()和 $(this).height()得到的值都会是0！因为图片没有加载完，js就已经去读取了，所以肯定得到的值都是0。

正确的做法是，要用 $(window).load()，等页面加载完了再执行上面代码，完整代码如下：

$(window).load(function(){

/*

*

*/

$('.public-leftimg').each(function(){

varx=100;//填入目标图片宽度

vary=100;//填入目标图片高度

varw=$(this).width();

varh=$(this).height();//获取图片宽度、高度

if(w>x){//图片宽度大于目标宽度时

varw_original=w,h_original=h;

h=h*(x/w);//根据目标宽度按比例算出高度

w=x;//宽度等于预定宽度

if(h<y){//如果按比例缩小后的高度小于预定高度时

w=w_original*(y/h_original);//按目标高度重新计算宽度

h=y;//高度等于预定高度

}

}

$(this).attr({width:w,height:h});

});

});