您的位置:首页 > Web前端 > CSS

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

2010-03-23 19:40 337 查看
在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似乎都一样。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: