来自:http://www.loveyuki.com/Article/CSS_Image_Autosize_IE_Firefox.aspx
一直以来有个很头疼的问题困扰着我，那就是图片缩放的问题，写到 JS 里面吧，不太容易修改。写到 CSS 里面吧，IE 6 又不支持 max-width，今天用了很久时间终于解决了这个问题，基本完美了，唯一不完美的就是 IE 6 只有在图片完全下载完成后才会自动调整大小，不过聊胜于无，总比进入页面后看到长长的横向滚动条舒服的多，这里使用了 expression，但是利用了一次加载，所以 expression 不会造成内存泄漏。当然，如果你有更好的解决方案，希望能与我交流。代码如下：
.Image { max-width:600px;height:auto;cursor:pointer; border:1px dashed #4E6973;padding: 3px; zoom:expression( function(elm) { if (elm.width>560) { var oldVW = elm.width; elm.width=560; elm.height = elm.height*(560 /oldVW); } elm.style.zoom = '1'; }(this));}
这篇文章的价值不在“炫技”，而在老浏览器时代对兼容性的务实处理。图片自适应在今天看似基础，但在当年 IE6 不支持 max-width 的环境里，往往要靠 expression 这类折中方案救场。实操时要注意：这种写法更适合历史项目维护，不建议在现代新项目里照搬；同时要关注图片加载后的闪动、布局回流和可维护性，优先用更标准的响应式方案替代。
IE6 下图片自动缩放怎么做？
可用 CSS 的 expression 在图片加载时判断宽度，超过阈值就按比例缩小，并把高度同步计算回来。这样能绕开 IE6 不支持 max-width 的问题，但效果通常要等图片下载完成后才会生效。
为什么不用 JS 直接控制图片大小？
直接写进 JS 虽然能做，但维护和修改都不如 CSS 集中。把逻辑放到样式层更便于统一管理，尤其是同类图片很多时，改一个规则就能批量生效。
图片缩放后如何避免页面出现横向滚动条？
关键是给图片设定最大宽度并保持等比缩放，让超宽图片自动收敛到容器内。即使旧浏览器只能在下载完成后调整，也比让页面被横向滚动条破坏阅读体验更实用。
发表回复