在旧版浏览器中如何通过CSS解决图片无法自适应等比缩放？-css教程-PHP中文网

IE6–IE8不支持max-width和object-fit，需用expression模拟：width/height分别设JS表达式并用true替代auto，配合*html隔离、overflow:hidden防溢出，且仅适用于必须兼容的遗留系统。

在旧版浏览器中如何通过css解决图片无法自适应等比缩放？

IE6–IE8 不支持 max-width 和 object-fit，但可以用 CSS 表达式（expression）+ 回退策略实现等比缩放，不过必须加 overflow: hidden 防溢出，且不能在现代项目中直接复用。

IE6 中用 `expression` 模拟 `max-width`

IE6 不识别 max-width，但支持私有属性 expression（JavaScript 计算式），可动态限制图片尺寸：

width: expression(this.width > 300 ? "300px" : "auto"); —— 当原始宽度超 300px 时强制设为 300px，否则保持原宽
必须搭配 height: auto，否则比例断裂；若同时限制高宽，需用两个 expression 分别控制 width 和 height
auto 在 IE6 中有 bug（导致文本不可选、输入框失焦），应改用 true 或空字符串
仅对 IE6 生效，需用 * html 或 [if IE 6] 条件注释隔离，避免污染其他浏览器

`overflow: hidden` 是必须加的兜底项

仅靠 expression 缩放不能解决“图片过高溢出容器”的问题：

CDP浏览器大师

CDP浏览器大师：通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务，解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。

下载

比如容器 height: 150px，图片原始高 400px、宽 600px，按宽缩到 300px 后高仍约 200px → 溢出 50px
此时必须给父容器加 overflow: hidden，否则会撑开布局或遮挡下方内容
注意：这属于“裁剪式适配”，不是真正的等比居中，视觉上可能丢失顶部/底部内容

为什么不能直接把现代写法降级套用？

常见错误是把 img { max-width: 100%; height: auto; } 直接丢进旧版 IE：

IE6–IE7 完全忽略 max-width，图片仍按原始尺寸渲染，极易撑破容器
object-fit 在 IE 全系都不支持，任何写法都无效
Flex/Grid 布局 + 图片自适应的组合在 IE10 以下基本不可用，不要尝试用 display: flex 配合 object-fit
若项目还需兼容 IE6，建议用条件注释加载独立样式表，避免混写造成维护混乱

真正棘手的不是怎么写，而是你得确认：这个页面现在还有多少真实用户在用 IE6？如果只是历史遗留系统内部使用，expression 加 overflow: hidden 足够；如果是面向公众的新项目，强行兼容反而会拖慢现代浏览器、增加安全风险——这时候该做的不是写兼容代码，而是推动停用旧环境。