img在IE6下用CSS限制最大高度、最大宽度

来源：互联网发布：数据库三层结构编辑：程序博客网时间：2024/05/14 07:21

在IE7、FF中限制最大高度和最大宽度很容易，只需要用max-height、max-width，但IE6下却不认min-*和max-*。那么该怎么解决img在IE6下用CSS限制最大高度、最大宽度呢？

方法一，用JS控制。这个确实可行，网上也有挺多的例子。不过我个人觉得麻烦。这里重点介绍第二种，用CSS控制。不过说实在的，这里也算是CSS+JS实现的。只是用到CSS中的expression把JS放到CSS中执行了。代码如下：

只限制最大宽度：

_width:expression(function(el){el.style.width=el.clientWidth > 140 ? "140px" : "auto";}(this));

只限制最大高度：

_height:expression(function(el){el.style.height=el.scrollHeight > 135? "135px" : "auto";}(this));

如果是高度、宽度都要限制的话得同时用：

_width:expression(this.clientWidth>140?(function(el){el.style.width=el.clientWidth/el.clientHeight>140/135?"140px":"auto";})(this):"auto");
_height:expression(this.clientHeight>135?(function(el){el.style.height=el.clientWidth/el.clientHeight<140/135?"135px":"auto";})(this):"auto");

注：这里的clientHeight跟scrollHeight似乎都一样。