图片在Flex布局中撑开容器的根源是缺乏高度约束，需为父容器设明确高度、用object-fit控制缩放，并通过flex-shrink:999和min-width/min-height:0强化压缩。
图片在 Flex 布局中高度过高撑开容器，本质是图片默认按原始尺寸渲染，而 Flex 容器未对其施加有效的尺寸约束。只设 max-height 有时不够——因为若父容器没设定高度基准（比如 height 或 max-height），max-height: 100% 会失效；且图片本身可能仍保持宽高比拉伸。
给图片父容器设明确高度或最大高度
Flex 项目（如图片的直接父元素）需有可参考的高度上下文，否则 max-height: 100% 无意义：
- 给图片外层包裹一个
div，并设置height: 200px或max-height: 200px - 若用
flex-direction: column，确保该列容器有明确高度（如height: 100vh或固定值） - 避免仅依赖
align-items: center或justify-content: center而不控高
图片自身用 object-fit + 尺寸控制组合处理
单纯设 max-height 可能导致变形或留白。推荐搭配 object-fit 保持比例：
-
width: 100%; height: 100%; object-fit: cover;—— 填满区域，可能裁剪 -
width: 100%; max-height: 200px; height: auto; object-fit: contain;—— 完整显示，居中留白 - 务必同时设
width和height（或至少一个为具体值），否则object-fit不生效
利用 flex-shrink 防止图片强行撑开
默认情况下图片作为 flex 项，flex-shrink: 1 允许压缩，但若图片内容过大且未设尺寸限制，仍可能突破。可主动强化收缩能力：
立即学习“前端免费学习笔记（深入）”；
- 给图片加
flex-shrink: 999;（远大于默认的 1） - 配合
min-width: 0; min-height: 0;—— 解除图片最小尺寸保护，允许真正压缩 - 注意：此法适合图片作为直接 flex 子项的情况（非嵌套在其他块内）
基本上就这些。核心是：有参照高度 + 图片自身可控 + flex 行为可调。三者配合，撑开问题基本解决。
