第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;}