插件介绍
项目中有图片的时候，有的宽大于高，有的宽小于高，尤其在做图片列表的时候，经常发现缩略图会有变形的。我们怎样来解决这一问题呢。
方法一：用photoshop来处理缩略图。小的项目还可以，大的项目，这样做难免会累的半死；
方法二：用jqthumb.js这款插件，只需要写上几句话，就可以让我们的项目中的缩略图快速解决！
jQThumb 兼容所有浏览器，包括 IE6。在高级浏览器中使用背景方式实现，并设置图片的尺寸（background-size）和位置（background-position）实现居 中；在 IE6 等老旧的浏览器中使用图片的方式实现，并使用绝对定位和 margin 实现居中。
下载地址： http://pan.baidu.com/s/1jG5lT1W
简单使用
<!DOCTYPE html>
<html lang="en">
<body>
<div style="width: 800px; height: 800px;">
<img src="http://img1.ph.126.net/P-PDJa_xvMnLY-10Rr-tEw==/3084684269789354051.jpg" class="example1" />
</div>
<div style="width: 200px; height:500px;">
<img src="http://img1.ph.126.net/P-PDJa_xvMnLY-10Rr-tEw==/3084684269789354051.jpg" class="example1" />
</div>
<script src="jquery.js"></script>
<script type="text/javascript" src="jqthumb.min.js"></script>
<script type="text/javascript">
$(function () {
$(‘img‘).jqthumb({
classname: ‘jqthumb‘,
width: ‘100%‘,
height: ‘100%‘,
position: {
x: ‘50%‘,
y: ‘50%‘
},
source: ‘src‘,
show: false,
responsive: 20,
zoom: 1,
method: ‘auto‘,
after: function (imgObj) {
console.log(imgObj);
},
done: function (imgArray) {
for (i in imgArray) {
$(imgArray[i]).fadeIn();
}
}
});
});
</script>
</body>
</html>