max-width: 100% + height: auto 才能实现安全等比缩放，因前者限制宽度不超父容器，后者保持原始宽高比；缺一即导致失真，且父容器必须有有效宽度约束。
直接给 <img> 加 max-width: 100% 和 height: auto 就能实现安全缩放，前提是父容器有宽度约束；只写 width: 100% 或漏掉 height: auto 是最常见的失真原因。
为什么 max-width: 100% + height: auto 才有效
浏览器渲染图片时，默认按原始尺寸显示。加 max-width: 100% 是告诉它：“别比父容器宽”，但不加 height: auto，高度就可能被固定或继承异常值，导致拉伸。两者必须同时存在，才能触发等比缩放逻辑。
-
max-width: 100%允许小图保持原尺寸，大图才缩放 —— 不会强行撑满 -
height: auto让浏览器用原始宽高比反推高度，不是靠 CSS 猜 - 单独用
width: 100%会强制宽度拉满，高度却没联动，90% 的“图片变形”都出在这里
父容器没宽度，max-width 就失效
max-width: 100% 的 “100%” 是相对于父容器计算的。如果父 <div> 没设宽（比如空 div、未设 width 或 flex 项未定义主轴尺寸），那这个百分比就没参照物，图片照样溢出。
- 常见场景：文章正文里直接插
<img>，但外层<section>没设max-width或width - 解决办法：给父容器加
width: 100%、max-width: 1200px，或确保它在flex/grid布局中能获得有效尺寸 - 移动端 Safari 有时对无宽容器更敏感，可加
width: 100%到父 div 强制回流
排查缩放不生效的三个关键点
加了样式却没反应？优先检查这三项，比重写 CSS 更快定位问题：
立即学习“前端免费学习笔记（深入）”；
- 开发者工具里看
Computed面板，确认max-width最终值是不是none—— 常见于某些 CSS 重置库或框架覆盖 - 检查是否有行内
style="height: 200px"或全局规则如img { height: auto !important }干扰 - 父容器是否用了
overflow: hidden却没设高？此时图片缩了但被裁掉，误以为没缩
需要高清屏适配时，别只靠 CSS
CSS 缩放再好，也不能解决“小图放大后糊”或“Retina 屏用 1x 图发虚”的问题。这时候必须补上 srcset 和 sizes：
-
srcset提供多分辨率源，例如：srcset="photo@1x.jpg 1x, photo@2x.jpg 2x" -
sizes告诉浏览器不同视口下该用多宽的图，例如：sizes="(max-width: 768px) 100vw, 50vw" - 注意：即使用了
srcset，仍要保留max-width: 100%+height: auto，否则加载的高清图仍可能溢出
真正容易被忽略的是：当图片嵌套在多个层级容器中时，某一层父元素的 display: inline 或 float 可能让宽度计算失效 —— 这时候加个 display: block 到 <img> 上，往往比调布局更快见效。
