[原创]简单办法实现任意尺寸缩略图无变形。帝国cms

帝国论坛 → 帝国网站管理系统交流区 → 帝国CMS使用交流 → [原创]简单办法实现任意尺寸缩略图无变形。

【本版专题贴子】

guan6
用户头衔：秀才

精华贴   ：0
发贴数   ：63
经验值   ：342
注册时间：2008-06-20

信息

搜索

好友

发送悄悄话

【精益求精－帝国网站管理系统7.5正式版开源发布】 [第 1 楼]

[原创]简单办法实现任意尺寸缩略图无变形。

帝国无法生成多个缩略图的尺寸，考虑到不同的页面可能有不同的布局需求，很多时候我们希望实现这种效果又不希望图片变形！

本人不懂程序，所以没办法开发个插件。
下来我来说一下我的实现办法，可以实现任意尺寸的缩略图，绝对无变形。

这里有一张原始图片

下面是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> 
<ul class="img">
<li class="i1"><img class="thumb1" src="http://bbs.phome.net/ebb_data/tran/2009-08/1251441539.jpg" />100*100</li>
<li class="i2"><img class="thumb2" src="http://bbs.phome.net/ebb_data/tran/2009-08/1251441539.jpg" />170*90</li>
<li class="i3"><img class="thumb3" src="http://bbs.phome.net/ebb_data/tran/2009-08/1251441539.jpg" />120*120</li>
<li class="i4"><img class="thumb4" src="http://bbs.phome.net/ebb_data/tran/2009-08/1251441539.jpg" />120*90</li>
<li class="i5"><img class="thumb5" src="http://bbs.phome.net/ebb_data/tran/2009-08/1251441539.jpg" />64*64</li>
<li class="i6"><img class="thumb6" src="http://bbs.phome.net/ebb_data/tran/2009-08/1251441539.jpg" />90*90</li>
</ul>
</body>

呵呵！还算简单吧，只是利用固定大小的一个层遮盖的图片的其他部分。然后设置图片上下左右都居中。

也就是我们生成缩略图的时候只需要生成一张尺寸最大的就可以了。

最后说下兼容问题：经过测试。IE（5、6、7、8） firefox 均良好。

上传以下图片：