2009/09/09 21:41
文章作者:Enjoy 转载请注明原文链接。
最好的解决办法,我想是底部加载的JS,判断图片宽度 > 600,就等比例缩小。那么怎么用CSS来实现呢?
开始尝试了下,不是很满意。搜索了下,大部分文章是这样写的:
.img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}
◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
◎ width:600px; 在所有浏览器中图片的大小为600px;
◎ 当图片大小大于600px,自动缩小为600px。在IE6中有效。
◎ overflow:hidden; 超出的部分隐藏,避免控制图片大小失败而引起的撑开变形。
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}
◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
◎ width:600px; 在所有浏览器中图片的大小为600px;
◎ 当图片大小大于600px,自动缩小为600px。在IE6中有效。
◎ overflow:hidden; 超出的部分隐藏,避免控制图片大小失败而引起的撑开变形。
这个方案我测试是错误的,当图片是1000px*1000px的时候,应用此CSS,图片宽度将变成600px,而高度还是1000px,图片就严重变形!既然用到了expression(有点费客户端资源),那就索性把JS那套拿过来用吧,改写一下。
#content img{height: expression(this.width > 600 ? this.height = this.height * 600 / this.width : "auto");
width: expression(this.width > 600 ? "600px" : "auto");
max-width:600px;}
width: expression(this.width > 600 ? "600px" : "auto");
max-width:600px;}
在IE6、IE7下可以实际大图片按比例缩小,不会出现图片变形的情况,在FF和chrome下,expression无效,但通过max-width限制图片最大宽度,使页面不会被撑开。
补充:原方案其实在正常情况下是正确的,IE6\IE7\FF\Chrome都正确。正常情况是指处理的图片是同域下的图片。如果不同域即引用了其它站的图片,那么就会有我上面所描述的问题,即图片会变形。

网页的描述多少字在GG和Baidu能显示全?
MYSQL镜像(主-从)配置记录

