首页 » 前端 » 正文

CSS等比例缩放图片

发布者:站点默认
2011/01/15 浏览数(4,121) 分类:前端 评论(2)

说明:

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

效果:

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

兼容常用浏览器的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的文章吧。

点击返回顶部
  1. 留言
  2. 联系方式