CSS等比例缩放图片

说明：

兼容IE（IE6、IE7、IE8）、FF、GC（Google Chrome）、Opera、Safari的CSS等比例缩放图片代码。

效果：

兼容常用浏览器的CSS图片自动缩放示例图(含IE6)

FF , OPERA , SAFARI , IE7 , IE8 方法如下：

采用WEB标准写法：

img{
	max-width:400px;
	max-height:300px;
	min-width:120px;
	min-height:90px;
}

IE6及其以下版本的浏览器：

利用其支持的expression属性（先不要急着“复制”，下边还有一条更好的规则，^_^）:

img { /* for IE6 */
     _width: expression(this.width > 400 && this.width > this.height ? 400 : 
          (this.width < 120 && this.width > this.height ? 120 : auto));
     _height: expression(this.height > 300 ? 300 : 
          (this.height < 90 ? 90 : auto));
}

注意：auto 会造成IE6错误，如： 文字不能被选中，输入框得不到焦点。故把 auto  改成 true，如下：

img { /* for IE6 */
     _width: expression(this.width > 400 && this.width > this.height ? 400 : 
          (this.width < 120 && this.width > this.height ? 120 : true));
     _height: expression(this.height > 300 ? 300 : 
          (this.height < 90 ? 90 : true));
}

补充：

提供一个更好的解决办法：让IE6支持max-height、min-height、max-width、min-width。操作：下载minmax.js.tar.gz，在页面中导入。

＜完＞

不懂为啥规则前有个“下划线”？看看这个关于CSS-HACK的文章吧。