缩略图自适应 解决变形模糊问题

dede缩略图自适应 解决变形模糊问题

(2013-12-23 23:15:25)

te> 转载 ▼ te>

标签： dede 缩略图 自适应 变形模糊 织梦

分类： dede织梦建站教程知识

dede的缩略图调用非常地不智能，如果容器与缩略图的尺寸不相符就很容易变形模糊，这个属于你自己对图片解决方案的控制问题，下面分享一个非常实用的css代码，也是淘宝里采用的解决方案！ 资料也是在网上整理过来的。。
先看html结构

CSS控制
a.pic {width:160px; height:120px; border:1px solid #E2E2E2; background:#F6F6F6; display:table-cell; overflow:hidden; vertical-align:middle; text-align:center; *display:block; *font-size:105px; *font-family:Arial;}
a.pic img {max-width:160px; max-height:120px;  vertical-align:middle;}

这样，不管你图片多大，高矮肥瘦，它都将自动控制在.pic这个盒子里，IE7以上完美通过，其它各大浏览器均兼容，ie6下，可通过脚本支持max-height,max-width属性，具体问度娘和谷歌吧，也可以只给定一个宽或高来解决ie6的情况，a.pic img {max-width:160px; max-height:120px; _height:120px; vertical-align:middle;}，这种解决在于你缩略图的比例，如果宽大于盒子宽度的会隐藏了，要想完美兼容，可以找js的完美脚本控制，我相信IE6的用户会越来越少了。
如果你的站有多种形式的尺寸图，只要改变.pic和img里面的相应宽高即可,特别注意的是 *font-size:105px;这个属性，这个不是随便改的，是高度的0.873倍，想完美呈现站内的缩略图，还有很多使用上的窍门，还得看你自己去处理了