只要给图片设置max-width: 100%和height: auto，就能随父容器等比缩放、不溢出不失真；height: auto维持宽高比，缺之则图片被压扁或拉长，而max-width: 100%确保宽度不超限。
图片在响应式容器里撑满又不失真，靠 max-width: 100% 和 height: auto
直接说结论：只要给图片设置 max-width: 100% 和 height: auto，它就能随父容器宽度等比缩放，不会拉伸变形。这是最轻量、兼容性最好（IE9+）的方案，不需要 JS 或额外 wrapper。
为什么必须写 height: auto？不写会怎样
只设 max-width: 100% 而不设 height，浏览器默认按图片原始高度渲染，缩放后宽高比就崩了——常见现象是图片被“压扁”或“拉长”，尤其在移动端横屏切换时更明显。
-
height: auto告诉浏览器：高度跟着宽度等比计算，维持原始宽高比 - 不能写
height: 100%：那会让图片强行填满父容器高度，破坏比例 - 也不能写固定值（如
height: 200px）：失去响应能力
遇到父容器高度受限时，max-height 会干扰缩放吗
会。如果父容器（比如一个 <div>）设置了 max-height，而图片原始高度很大，仅靠 max-width: 100% + height: auto 无法限制高度溢出——因为 max-width 只管宽度上限，不管高度。
- 解决办法：给图片加
max-height: 100%，同时确保父容器有明确高度（如height: 300px或flex: 1） - 但注意：此时若父容器宽高比和图片不一致，图片可能被截断（
object-fit: contain更合适，见下一条） -
max-height和height: auto共存是安全的，浏览器优先满足更严格的约束
想让图片“居中显示且不裁剪”，该用 object-fit 还是继续用 max-width
max-width: 100% + height: auto 是“等比缩放到宽度刚好填满”，适合内容主导场景；而 object-fit: contain 是“等比缩放到完全可见”，适合图库、头像等需要完整展示的场景。
立即学习“前端免费学习笔记（深入）”；
- 要
contain效果：必须用object-fit: contain，并配合固定宽高（如width: 100%; height: 200px），否则无效 -
object-fit不兼容 IE，需要 fallback 时仍得靠max-width方案 - 不要混用：
object-fit和max-width+height: auto目标不同，强行叠加反而容易失控
真正容易被忽略的是父容器的 display 类型——如果父容器是 inline（比如默认的 <span>），图片底部会出现空白间隙，这时得加 vertical-align: top 或把父容器改成 block。缩放本身没问题，但布局错位会让你以为是 CSS 写错了。
