CSS限定图片宽高在范围内等比缩放（img缺省宽高属性）

在标准浏览器中，我们可以通过

img{ max-width:400px; max-height:200px; }

CSS样式控制图片，限定img图片在指定范围内等比缩放。该功能实现的前提是最终显示的img标签必须缺省 宽度 或 高度 属性（img图片没有宽高属性）。

 

img{ max-width: 400px; max-height:200px; }失效的原因：

一般，web后台或前台用户在编辑图片时，可能会手动设定img标签的宽高属性。因为img元素标签的属性为最高优先级，所以通过css样式控制的图片最大宽高属性会失效。此时图片的显示会由于img本身的宽高属性决定，因此，图片很可能变形。

 

解决方法：js控制图片的宽高属性输入或后台过滤，去掉img标签的宽高属性等。

 

Img未定义宽高属性时，IE7的表现符合web标准；因此，不需要为IE7单独设置样式

 

IE6不识别max-width, max-height，需使用hack处理

 

img{ _width:expression(this.width>=400&&this.width/400>=this.height/200?"400px":true);

_height:expression(this.height>=200&&this.width/400<this.height/200?"200px":true);

}（img缺省宽高属性有效）

 

img{ _width:expression(this.width>=400&&this.width/400>=this.height/200?"400px":"auto");

_height:expression(this.height>=200&&this.width/400<this.height/200?"200px":"auto");

}（忽略img设定的宽高属性，强制img图片在范围内等比缩放）

 

综上所叙：

在img图片未设定宽高属性时，可使用样式：

img{max-width:400px;max-height:200px;_width:expression(this.width>=400&&this.width/400>=this.height/200?"400px":"auto");_height:expression(this.height>=200&&this.width/400<this.height/200?"200px":"auto");

或

img{max-width:400px;max-height:200px;_width:expression(this.width>=400&&this.width/400>=this.height/200?"400px":true);_height:expression(this.height>=200&&this.width/400<this.height/200?"200px":true);

 

实现图片在一定宽高范围内的等比缩放。（需关注的是IE6中css表达式的运行效率）

 

 

关于ie6中用js实现图片在范围内等比缩放的控制方法的显示效果差异，未验证待续。

转载地址：http://haitaowang.blog.163.com/blog/static/1280231192012112424314819/