只写 max-width: 100% 和 height: auto 不够，因 flex 容器未约束宽度时 img 盒模型仍被拉伸，max-width 仅限内容区宽度上限，不阻止 flex 分配的容器本身变形；须配合 display: block 消除基线间隙，并由父 wrapper 控制 flex 分配空间。
直接给 img 设 max-width: 100% 和 height: auto 就够了，但必须确保父容器有明确宽度约束，否则它可能不生效。
为什么只写 max-width: 100% 不够
很多开发者照搬“响应式图片”口诀，只加这两条，结果在 flex 容器里图片仍被拉宽变形。根本原因是：max-width 是上限，不是强制尺寸；当父容器是 display: flex 且没设宽度时，img 的盒模型可能被 flex 拉伸到远超原始宽高比的程度，max-width 压不住——它只限制「内容区最大能多宽」，不限制 flex 分配的盒子本身。
- 如果父容器是
div且没设width或flex-basis，img可能无限撑开 - 如果父容器用了
flex: 1，img默认会填满该 flex 项的全部可用空间，max-width失效 - 必须配合
display: block消除 inline 元素默认的基线留白，否则底部总有空隙
img 直接写样式 vs 包一层 div
两种写法效果不同，选错会导致 layout shift 或 object-fit 失效：
- 直接给
img加max-width: 100%; height: auto; display: block;：适合简单场景，但无法控制容器尺寸，flex 项行为不可控 - 更推荐包一层
div（如.img-wrapper），让 wrapper 做 flex 项并设flex: 1 1 200px，再把img放里面设width: 100%; height: auto;：这样 wrapper 控制分配空间，img只负责自适应缩放，逻辑清晰 - 若需等高或裁剪（如封面图），wrapper 内用
object-fit: cover，但前提是 wrapper 有明确宽高（比如设了aspect-ratio: 4/3或固定height）
常见错误现象与修复
遇到图片溢出、换行异常、上下留白不一致，大概率是以下原因：
-
img在 flex 容器中仍表现为 inline 元素 → 加display: block或vertical-align: top - 父容器用了
flex-wrap: wrap但子项没设最小宽度 → 补上flex: 0 0 200px或min-width: 200px - 图片在小屏下过窄 → 用媒体查询收紧
flex-basis，比如@media (max-width: 600px) { .img-wrapper { flex: 0 0 150px; } } - IE 或旧 Android WebView 不支持
max-width在 flex 中的行为 → 降级方案：用width: 100%+height: auto+ 父容器设固定宽
真正关键的不是那两行 CSS，而是它在哪一级生效、谁在控制尺寸分配。别把 img 当成独立个体去调，它永远受父容器的 flex 规则支配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
