最可靠方案是max-width: 100% + height: auto，它确保图片等比缩放、不溢出、不失真，兼容IE9+，防CLS且不依赖JS；需配合父容器宽度约束，并在CMS等不可控场景中用!important重置内联样式。
直接写 max-width: 100% + height: auto 就够了，这是目前兼容性最好、防 CLS、不依赖 JS 的底线方案。
为什么 max-width: 100% + height: auto 是首选
它让浏览器按图片原始像素比自动推算高度，不是“猜测”，而是所有现代浏览器（含 IE9+）都支持的原生行为。只要父容器有宽度（哪怕只是 max-width: 1200px），图片就能等比缩放、不溢出、不失真。
-
max-width: 100%是上限，小图不会被强行放大；width: 100%是强制填满，容易撑破布局 -
height: auto缺一不可——没有它，内联height或默认值会覆盖比例逻辑 - 对 CMS 富文本、第三方组件输出的图片最友好，加在全局样式里就能生效：
article img, .content img { max-width: 100%; height: auto; }
遇到内联 width 和 height 属性时怎么破
比如 CMS 输出了 <img src="x.jpg" style="width: 800px; height: 600px;">，你没法改 HTML，但又不能让它拉伸变形。
- 必须用
!important强制重置：img[style] { height: auto !important; } - 仅靠
max-width: 100%不行——内联height: 600px优先级更高，会锁死高度 - 如果图片还带
width内联值，也建议加width: 100% !important，避免窄屏下溢出
要裁剪或固定容器比例怎么办
当你要的是“填满并居中裁剪”（如封面图），或卡片尺寸必须严格维持 4:3、1:1，就不能只靠 height: auto。
立即学习“前端免费学习笔记（深入）”；
- 先确保父容器有明确宽高或
aspect-ratio：.card { aspect-ratio: 16 / 9; width: 100%; } - 再给
<img>加width: 100%; height: 100%; object-fit: cover; -
object-fit单独写无效——没容器尺寸，它根本没参照基准 - 旧版 Safari（aspect-ratio，得 fallback 到
padding-top技巧或 JS
真正容易被忽略的是父容器的宽度来源：哪怕你把 img 样式全写对了，只要上层某个 <div> 还锁着 width: 1000px，图片就永远缩不到更小——响应式是整条继承链的事，不是单个标签能决定的。
