在 Firefox、Chrome、Opera 等浏览器中，都支持 max-width，这样我们给文章中的图片指定了 max-width 后：若图片大小超过 max-width，则自动缩小到 max-width；若没有超过 max-width，则保持原大小不动。这样既保证了大图片不会撑大布局，又保证了小图片不会被拉大变得畸形。
但 IE 6 中不支持 max-width 这个属性，解决办法是用 JavaScript 或 CSS 的 expression（仅 IE 支持）。用 JavaScript 稍显麻烦，用 CSS 的 expression 实际上也是执行一段 JavaScript 代码，但使用起来较方便。
CSS 代码
.content img
{
max-width:300px;
_width:expression((this.offsetWidth > 300) ? "300px" : this.offsetWidth + "px" );
/*_width: expression(Math.min(this.offsetWidth, 300) + "px");*/
}
HTML 代码
<div class="content">
<img src="1.png" alt="demo" />
</div>
上面 CSS 中，第一句是标准支持的，第二句和第三句是 IE 支持的，第二句和第三句效果是一样的，只是使用的语句不同罢了。
要注意，我看到有人使用另外一种写法：_width:expression((this.offsetWidth > 300) ? "300px" : "auto" );，使用的是 auto，我不知道其他人预览时如何，只是这种写法导致我的浏览器当掉了。
重要说明
此法虽然使用方便，但有一个最大的问题，就是判断不准确，有时候图片明明很大，它却误判为几十像素，要刷新一下才能正确判断。也有少数情况，将图片宽度判断大了。
更多的IE 中实现 max-width 解决文章中大图片撑大布局的问题方法(css)请到论坛查看: http://BBS.TC711.COM
【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】
来源：
互联网
日期：2012-4-29
