第98款插件：jqthumb.js缩略图插件-让缩略图正常显示而不变形

1、最简使用教程：宽和高默认都是 100px,定义宽高是200px，position 默认都为 50%。

一共有2张尺寸各不同的图片，红色方框里的图片是用样式固定死的，明显有拉伸的现象。而绿色方框里的是使用插件创建的，没有拉伸，效果好很多。

JavaScript

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

HTML

<ul class="element">
	<li class="element1"><img src="images/1.jpg" alt=""></li>
	<li class="element2"><img src="images/1.jpg" alt=""></li>
</ul>

CSS

.element { width: 920px; margin: 0 auto; list-style-type: none; zoom: 1;}
.element:after { content: ''; display: table; clear: both;}
.element li { float: left; width: 200px; height: 200px; margin: 20px 10px 0; display: inline;}
.element1 { border: 5px solid #d9534f;}
.element1 img { width: 200px; height: 200px; vertical-align: top;}
.element2 { border: 5px solid #5cb85c;}