一、插件介绍
项目中有图片的时候，有的宽大于高，有的宽小于高，尤其在做图片列表的时候，经常发现缩略图会有变形的。我们怎样来解决这一问题呢。
方法一：用photoshop来处理缩略图。小的项目还可以，大的项目，这样做难免会累的半死；
方法二：用jqthumb.js这款插件，只需要写上几句话，就可以让我们的项目中的缩略图快速解决！
jQThumb 兼容所有浏览器，包括 IE6。在高级浏览器中使用背景方式实现，并设置图片的尺寸（background-size）和位置（background-position）实现居中；在 IE6 等老旧的浏览器中使用图片的方式实现，并使用绝对定位和 margin 实现居中。

二、插件图片、DEMO及下载

三、使用教程
1、引入文件

<script src="js/jquery.min.js"></script>
<script src="js/jqthumb.min.js"></script>

$('.img').jqthumb({
	width:200,
	height:200
});

部分参数配置实例

$('.original').jqthumb({
        classname : 'jqthumb',
        source    : 'attr-src',
        width     : 440,
        height    : 294,
        zoom      : 1,
        position  : { y: '50%', x: '50%' },
        show      : false,
        before    : function(oriImage){},
        after     : function(imgObj){
            fadeIn($(imgObj));
        }
    });


    $('.example1').jqthumb({
        classname : 'jqthumb',
        source    : 'attr-src',
        width     : '100%',
        height    : 121,
        zoom      : 1.3,
        position  : { y: '50%', x: '50%' },
        show      : false,
        before    : function(oriImage){},
        after     : function(imgObj){
            fadeIn($(imgObj));
        }
    });


    $('.example2').jqthumb({
        classname : 'jqthumb',
        source    : 'attr-src',
        width     : '100%',
        height    : 121,
        zoom      : 1.3,
        position  : { y: '100%', x: '45%' },
        show      : false,
        before    : function(oriImage){},
        after     : function(imgObj){
            fadeIn($(imgObj));
        }
    });


    $('.example3').jqthumb({
        classname : 'jqthumb',
        source    : 'attr-src',
        width     : '100%',
        height    : 295,
        position  : { y: '50%', x: '50%' },
        show      : false,
        before    : function(oriImage){},
        after     : function(imgObj){
            fadeIn($(imgObj));
        }
    });


    $('.example4').jqthumb({
        classname : 'jqthumb',
        source    : 'attr-src',
        width     : '100%',
        height    : 295,
        position  : { y: '50%', x: '12%' },
        show      : false,
        onDemand: true,
        before    : function(oriImage){},
        after     : function(imgObj){
            fadeIn($(imgObj));
        }
    });

四、参数

在线测试

改造后代码：

    好处：不同尺寸的地方调用时，不需要重复去定义宽高，宽高由js自动获取外围元素宽度得到。

    在需要进行图片等比缩放的地方，添加类：scaleBox

<div class="picture scaleBox">
    <img src="图片的链接地址" />
</div>

.jqthumb {
    position: absolute;
    left: 0px;
    top: 0px;
}
.xxx .picture {
    display: block;
    overflow: hidden;
    position: relative;
}

//图片等比缩放
function scaleImg(){
	$(".scaleBox").each(function(){
		$(this).find("img").jqthumb({
			width: $(this).outerWidth(),
			height: $(this).outerHeight(),
			after: function(imgObj){
				imgObj.css('opacity', 1).animate({opacity: 1},1000);
			}
		});
	})
}
$(document).ready(function() {
	scaleImg();//图片等比缩放	
});

重点说明：如果与滚动等特效配合使用，scaleImg();必须在滚动等代码之后调用，否则会出现问题。