css实现图片大小自适应
[ 2016/06/14, htmlcss , 2584阅, 0评 ]

QQ截图20160614210751.jpg

使用CSS实现图片自适应很简单,主要靠两个参数来完成,分别是max-width和max-height,这两个参数在FIREFOX和IE7以上支持都很好,但是在IE6上面,效果非常糟糕,尤其是对于多张图片的显示,第一次显示网页大都很难达到图片自适应的效果,一般都是有些能自适应,有些不能自适应,多次刷新可能又显示OK,就是这点就足够烦人,而且一旦显示多张图片,IE 6上就卡的要命(expression在IE上比较占用资源,感觉设计是用来玩得,FIREFOX自适应效果还是比较好,速度也非常快),反正笔者至今是没有找到更好的CSS方法来让IE 6完美支持图片自适应。

PS:IE6其实可以忽略不计啦

<style>
*{ margin:0; padding:0}
.p1,.p2,.p3{width:180px;height:180px;border:2px solid #393;background:#f00;display:inline-block;margin:20px 0 0 20px;text-align:center;vertical-align:middle}
img{max-width: 180px;max-height: 180px;height:auto;overflow:hidden;
zoom:expression( function(e) {
if(e.width>e.height) {if (e.width>180) { e.height = e.height*(180 /e.width); e.width=180; }}
else {if (e.height>180) { e.width = e.width*(180 /e.height); e.height=180; }}
e.style.zoom = '1';     }(this));
}
</style>
<p class="p1"><img src="test1.jpg"/></p>
<p class="p2"><img src="test2.jpg"/></p>
<p class="p3"><img src="test3.jpg"/></p>

上面代码格式上需要特别注意两点:

1、zoom属性里宽高赋值不能带单位(如px),否则无效;

2、if和else语句也必须带大括号括起来,单句指令也不行(而在很多编程语言里,单句指令可以无需大括号);

有朋自远方来...评论一下呗O(∩_∩)O