Jquery 动态实现图片缩略的代码

用脚本实现图片的缩略，在某些情况下经常用到，例如做一些商品的预览图缩略等。
本节分享的这段动态缩略图的代码，用jquery来实现，供大家参考。

代码：

<script> //页面加载完执行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); } }); }) } </script>

注意：
引入外部jquery代码。

您可能感兴趣的文章：
Jquery 动态实现图片缩略的代码
Jquery动态进行图片缩略的原理及实现
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
js动态获取图片width与height 等比例缩放的代码
jQuery 幻灯片插件(带缩略图功能)
jQuery实现等比例缩放大图片让大图片自适应页面布局
php缩略图填充白边的示例代码
jquery 简单的图片展示效果
jQuery动态改变图片显示大小(示例代码)
php gd库实现服务端图片裁剪与缩略图