Jquery动态进行图片缩略的原理及实现

图片缩略在某些情况下还是比较实用的，比如在做一些商品的预览图缩略等等，下面为大家介绍下具体的实现思路及代码，有需求的朋友可以参考下

 
//页面加载完执行resizeImage()函数 
$(document).ready(resizeImage()); 

function resizeImage(){ 
$(".pic a img").each(function(){ 
//加载图片至内存，完成后执行 
$(this).load(function(){ 
//获得原始图片高宽 
var imgWidth = $(this).width(); 
var imgHeight = $(this).height(); 
//获得图片所在Div高宽 
var boxWidth=$('.pic').width(); 
var boxHeight=$('.pic').height(); 
//比较imgBox的长宽比与img的长宽比大小 
if((boxWidth/boxHeight)>=(imgWidth/imgHeight)) 
{ 
//重新设置img的width和height 
$(this).width((boxHeight*imgWidth)/imgHeight); 
$(this).height(boxHeight); 
//让图片居中显示 
var margin=(boxWidth-$(this).width())/2; 
$(this).css("margin-left",margin); 
} 
else 
{ 
//重新设置img的width和height 
$(this).width(boxWidth); 
$(this).height((boxWidth*imgHeight)/imgWidth); 
//让图片居中显示 
var margin=(boxHeight-$(this).height())/2; 
$(this).css("margin-top",margin); 
} 
}); 
}) 
} 