图片不撑满flex容器的常见原因是父容器无显式高度且img未设flex:1；必须同时满足：父容器display:flex并有明确高度、img设flex:1、配合object-fit:cover/contain，缺一不可。
flex容器里图片不撑满，常见原因是什么
直接给 <img> 设 width: 100%; height: 100% 却没效果？大概率是父容器没显式高度，或 img 没参与 flex 分配。Flexbox 默认不会让替换元素（如图片）自动拉伸填满剩余空间——它只按内容尺寸计算初始大小，flex: 1 必须显式声明才能触发伸缩行为。
必须设置的三个关键 CSS 规则
要让图片真正“自动填满”弹性盒子，这三项缺一不可：
-
img的父容器需为display: flex，且自身有明确高度（比如height: 400px或flex: 1） -
img必须设flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），不能只靠width/height - 搭配
object-fit: cover或contain，否则拉伸会变形或留白
示例：
.box { display: flex; height: 300px; }
img { flex: 1; object-fit: cover; }
为什么用 flex: 1 而不是 width: 100%
width: 100% 依赖父容器的宽度，但对高度无效；而 flex: 1 让图片主动参与主轴和交叉轴的空间分配。尤其在 column 方向的 flex 容器中，width: 100% 可能生效，但高度仍塌陷——只有 flex: 1 能同时驱动两个方向的填充。
- 若父容器是
flex-direction: row，flex: 1主要影响宽度分配 - 若父容器是
flex-direction: column，flex: 1才真正控制高度撑满 - Safari 对未设
flex-basis的图片更敏感，flex: 1显式声明比只写flex-grow: 1更稳妥
容易被忽略的兼容性细节
旧版 Safari（iOS 14.5 之前）对 flex: 1 + object-fit 组合支持不稳定，图片可能不渲染或错位。此时可加一层兜底：
- 给
img同时设max-width: 100%; max-height: 100% - 确保父容器有
overflow: hidden，防止裁切失效时溢出 - 避免在
img上同时用margin和gap，flex 容器内gap优先级更高，margin可能被忽略
最简健壮写法：
.container { display: flex; height: 100vh; overflow: hidden; }
img { flex: 1; object-fit: cover; min-width: 0; min-height: 0; }
其中 min-width: 0 和 min-height: 0 是防 Safari 强制保持图片固有尺寸的关键补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
