dede缩略图自适应 解决变形模糊问题
(2013-12-23 23:15:25)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倍,想完美呈现站内的缩略图,还有很多使用上的窍门,还得看你自己去处理了