# 图片缩放的问题

- Link: https://yjyj.net/css/461.html
- Published: 2008-03-27T15:01:00+08:00
- Author: 小 虾

⚡ 生猛大蝦编辑部 · 30 秒核心看点

 * 核心问题是图片过宽导致版面被撑坏，单靠 CSS 在旧浏览器里不够稳。
 * 方案用 expression 触发图片自动缩放，兼顾 IE6 兼容，但要接受加载完成后才调整。
 * 实操结论：比起横向滚动条，先保住页面可读性更重要，且一次性加载可降低泄漏风险。

来自: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 这类折中方案救
场。实操时要注意：这种写法更适合历史项目维护，不建议在现代新项目里照搬；同时要关注
图片加载后的闪动、布局回流和可维护性，优先用更标准的响应式方案替代。

❓ 延伸问答与排错指南（FAQ）

IE6 下图片自动缩放怎么做？

可用 CSS 的 expression 在图片加载时判断宽度，超过阈值就按比例缩小，并把高度同步计算
回来。这样能绕开 IE6 不支持 max-width 的问题，但效果通常要等图片下载完成后才会生效。

为什么不用 JS 直接控制图片大小？

直接写进 JS 虽然能做，但维护和修改都不如 CSS 集中。把逻辑放到样式层更便于统一管理，
尤其是同类图片很多时，改一个规则就能批量生效。

图片缩放后如何避免页面出现横向滚动条？

关键是给图片设定最大宽度并保持等比缩放，让超宽图片自动收敛到容器内。即使旧浏览器
只能在下载完成后调整，也比让页面被横向滚动条破坏阅读体验更实用。

📚 【[前端杂烩](https://yjyj.net/category/css)】专栏延伸阅读与热门精选（[全站文章归档](https://yjyj.net/archive)）：

 * [IE6下DIV高度显示的Bug](https://yjyj.net/css/336.html)
 * [11px的简/繁体中文清晰字体的css设置](https://yjyj.net/css/18.html)
 * [学习收集-关于用CSS控制输入框input悬停交互样式](https://yjyj.net/css/492.html)
 * [样式的优先原则](https://yjyj.net/css/525.html)
 * 热门必读[解决: windows 环境下 无法将“git”项识别为 cmdlet、函数、脚本文件或可运行程序的名称](https://yjyj.net/learn/7776.html)
 * 热门必读[DMIT 全线缺货, 只剩搬瓦工了](https://yjyj.net/discover/7787.html)