使用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语句也必须带大括号括起来，单句指令也不行（而在很多编程语言里，单句指令可以无需大括号）；