当图片通过内联样式设定了固定宽高（如 width: 800px; height: 600px），仅靠 max-width: 100% 无法维持原始宽高比；通过 CSS 强制重置 height: auto 并配合 !important，即可在不改动 HTML 的前提下实现真正的响应式等比缩放。
当图片通过内联样式设定了固定宽高（如 `width: 800px; height: 600px`），仅靠 `max-width: 100%` 无法维持原始宽高比；通过 css 强制重置 `height: auto` 并配合 `!important`，即可在不改动 html 的前提下实现真正的响应式等比缩放。
在响应式网页开发中，一个常见但棘手的问题是：图片已通过内联样式（style="width: 800px; height: 600px"）硬编码了初始尺寸，而你无法修改该 HTML —— 比如受限于 CMS 输出、第三方组件或遗留代码。此时若仅对所有 <img> 全局设置 max-width: 100%，浏览器会优先遵循内联 height 值，导致图片在缩放时被拉伸或压扁，完全破坏原始 4:3（或其他任意）宽高比。
根本原因在于 CSS 层叠优先级：内联样式（style 属性）的优先级高于普通 CSS 规则，因此即使你在外部样式表中写了 height: auto，它也会被内联的 height: 600px 覆盖。
✅ 正确解法是使用 !important 提升声明权重，并将高度交还给浏览器自动计算：
img {
max-width: 100%;
height: auto !important;
}
该方案具备完全的通用性：无论内联宽高是 800×600、1200×400 还是 320×768，只要它们真实反映图片的固有尺寸（即与实际像素一致），height: auto 就会基于当前渲染宽度，按原始比例自动推算出正确高度，从而严格保持宽高比。
⚠️ 注意事项：
-
height: auto仅在width有明确值（此处由内联width: 800px提供）时才能生效；若内联同时缺失width，此方案不适用； -
!important在此场景下是必要且合理的——它并非滥用，而是对抗不可修改的高优先级内联样式的技术必需； - 确保图片
src指向的资源本身具有对应分辨率，否则可能出现模糊或失真（这属于资源优化范畴，不在本 CSS 方案解决范围内）。
总结：无需 JavaScript、无需额外 wrapper 元素、无需修改任何 HTML，仅用两条简洁的 CSS 声明，即可优雅解决“受控内联尺寸下的响应式等比缩放”问题——这是语义化、可维护且符合现代 CSS 最佳实践的标准方案。
