帝国无法生成多个缩略图的尺寸,考虑到不同的页面可能有不同的布局需求,很多时候我们希望实现这种效果又不希望图片变形!
本人不懂程序,所以没办法开发个插件。 下来我来说一下我的实现办法,可以实现任意尺寸的缩略图,绝对无变形。
这里有一张原始图片
![](http://bbs.phome.net/ebb_data/tran/2009-08/1251441539.jpg)
下面是CSS(先预览看看效果)
<title>CSS任意尺寸无变形缩略图</title> <style type="text/css"> /* ////////////////////// 原始图片尺寸为200*200 如何设置图片(.thumb)的值: top: -(原始图片高度- 缩略图高度) / 2; left: -(原始图片宽度- 缩略图宽度) / 2; TOP和LEFT的值起到 使图片上下左右居中显示的作用。 ///////////////////// */ .img{list-style:none;} li{float:left;margin-right:15px;overflow:hidden;position:relative;}/*设置超出li部分被隐藏*/ .img em{color:#fff;font-size:10px; font-family:Georgia;padding:0 5px;background:#333;position:absolute;right:0;bottom:0;} /*图片尺寸 100*100 */ .i1{width:100px;height:100px;} .thumb1{position:relative;top:-50px;left:-50px;} /*图片尺寸 170*90 */ .i2{width:170px;height:90px;} .thumb2{position:relative;top:-55px;left:-15px;} /*图片尺寸 120*120 */ .i3{width:120px;height:120px;} .thumb3{position:relative;top:-40px;left:-40px;} /*图片尺寸 120*90 */ .i4{width:120px;height:90px;} .thumb4{position:relative;top:-55px;left:-40px;} /*图片尺寸 64*64 */ .i5{width:64px;height:64px;} .thumb5{position:relative;top:-68px;left:-68px;} /*图片尺寸 90*90 */ .i6{width:90px;height:90px;} .thumb6{position:relative;top:-55px;left:-55px;} </style> <body><br /><br /><br /> <ul class="img"> <li class="i1"><img class="thumb1" src="http://bbs.phome.net/ebb_data/tran/2009-08/1251441539.jpg" /><em>100*100</em></li> <li class="i2"><img class="thumb2" src="http://bbs.phome.net/ebb_data/tran/2009-08/1251441539.jpg" /><em>170*90</em></li> <li class="i3"><img class="thumb3" src="http://bbs.phome.net/ebb_data/tran/2009-08/1251441539.jpg" /><em>120*120</em></li> <li class="i4"><img class="thumb4" src="http://bbs.phome.net/ebb_data/tran/2009-08/1251441539.jpg" /><em>120*90</em></li> <li class="i5"><img class="thumb5" src="http://bbs.phome.net/ebb_data/tran/2009-08/1251441539.jpg" /><em>64*64</em></li> <li class="i6"><img class="thumb6" src="http://bbs.phome.net/ebb_data/tran/2009-08/1251441539.jpg" /><em>90*90</em></li> </ul> </body>
呵呵!还算简单吧,只是利用固定大小的一个层遮盖的图片的其他部分。 然后设置图片上下左右都居中。
也就是我们生成缩略图的时候只需要生成一张尺寸最大的就可以了。
最后说下兼容问题: 经过测试。IE(5、6、7、8) firefox 均良好。
上传以下图片:
![](../ebb_data/tran/2009-08/1251441539.jpg)
|