max-width: 100% 仅限制宽度上限，不保证等比缩放；必须搭配 height: auto 才能防变形，否则宽高解耦导致压扁或拉长；在 flex 容器中还需 min-width: 0，且父容器需有明确宽度约束。
max-width: 100% 本身不控制变形，只限制宽度上限
很多人以为加了 max-width: 100% 就能“让图片不变形”，其实它只管宽度不超父容器，对高度完全不管——如果没配 height: auto，浏览器仍按原始高度渲染，宽缩了、高没变，比例就崩了。常见现象是图片被压扁或拉长，尤其在 flex 容器里更明显。
-
max-width: 100%是“最多这么宽”，不是“等比缩放指令” - 必须搭配
height: auto，否则宽高解耦，变形必然发生 - 写了
height: 100%反而更糟：父容器高度为auto时，子图高度直接算成 0
父容器没尺寸约束，max-width 就失去参照
当父容器是 div 且没设 width、max-width 或没在 flex/grid 中被分配空间时，它的宽度其实是“内容撑开”的，max-width: 100% 实际参考的是这个动态宽度，而非你预期的卡片/列宽。结果就是小图正常、大图依然溢出，还查不出原因。
- 检查父容器是否显式设置了宽度（如
width: 300px或flex: 1） - 在 flex 容器中，图片需额外加
min-width: 0，否则默认min-width: auto会锁住最小宽度 - 避免父容器同时设
padding+box-sizing: content-box，这会让可用内容区比视觉宽度小得多
object-fit 才是专治变形的属性，但需要容器有明确宽高
object-fit 不是 max-width 的替代品，而是互补项：前者决定“怎么填”，后者决定“最大能多大”。想用 cover 或 contain，前提是容器本身宽高固定（或通过 aspect-ratio 约束），否则 object-fit: cover 会因高度不确定而失效或裁切异常。
-
object-fit: cover需配合width: 100%; height: 100%，不能只靠max-width - IE 旧版本不支持
object-fit，得降级用背景图或position: absolute + transform - 如果容器宽高比和图片不一致，
object-fit: contain会留白，cover会裁剪——选哪个取决于业务需求，不是技术上“更正确”
内联 width/height 属性和 srcset 加载顺序会悄悄破坏响应逻辑
CMS 输出或编辑器插入的 
max-width 和 height: auto，尤其在 Safari 中，srcset 切换高倍图后若保留内联尺寸，新图可能按旧尺寸渲染导致错位。
- 上线前务必检查 HTML 源码，删掉所有
width和height内联属性 - srcset 要配 fallback
src，且不要在src和srcset里混用不同分辨率的图 - 移动端调试时禁用 JS，纯 CSS 下验证缩放行为，排除 lazyload 或框架样式干扰
真正卡住人的从来不是 max-width 这一行代码，而是它和父容器尺寸、图片原始属性、布局上下文之间的隐性依赖。漏掉任意一环，变形就藏不住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
