图片未设宽高时flex容器高度意外膨胀，因浏览器默认按内联元素处理并保留基线间隙；解决方法包括设display: block、vertical-align或确保父容器高度固定并配合object-fit使用。
图片没设宽高时，flex容器高度会意外膨胀
浏览器默认把图片当内联元素处理，而内联元素自带基线对齐（baseline alignment），会在图片下方留出约 4px 的空白间隙——这个间隙属于行盒（line box）的 descent 区域，flex 容器会把它算进 height 或 min-height 的计算里，导致容器比预期高。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图片加
display: block，直接消除基线间隙 - 或设
vertical-align: top/middle/bottom，其中top和bottom能彻底避开 baseline 对齐逻辑 - 避免只靠
height: 100%拉伸图片：如果父容器高度未显式定义（比如 flex 项没设align-items: stretch或被覆盖），height: 100%会失效，图片退回到固有尺寸，再次触发上述间隙问题
flex子项图片用 object-fit 但容器仍撑开
object-fit 只控制图片内容在框内的渲染方式，不改变图片元素自身的尺寸盒（content box）。如果图片原始尺寸很大，又没限制其外层盒子的 max-width 或 width，它依然会按原始宽高参与 flex 主轴/交叉轴的尺寸计算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图片外层包裹一层
div，并设overflow: hidden+ 明确的width/height - 或直接在
img上同时设置：width: 100%; height: 100%; object-fit: cover;，但前提是父容器高度已固定（如通过flex: 0 0 200px或height: 200px） - 注意
object-fit在 Safari 旧版本（img 标签支持不稳定，可能回退为拉伸变形，此时需降级用背景图
图片加载完成前占位塌陷，加载后突然撑高
图片异步加载期间，若未设置 width 和 height 属性（或 CSS 尺寸），浏览器无法预留空间，渲染时先按 0×0 占位；加载完成后按原始尺寸重排，触发 flex 容器重新计算高度，造成布局抖动甚至父级滚动条闪现。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
img标签上写原生width和height属性（如<img style="max-width:90%" style="max-width:90%" alt="CSS如何排查由于图片导致的flex高度被异常撑大" >），现代浏览器会据此生成 aspect ratio box，即使 CSS 覆盖尺寸也能维持比例占位 - CSS 中用
aspect-ratio: 3 / 2配合width: 100%，兼容性需查caniuse（Chrome 88+、Firefox 89+、Safari 15.4+） - 慎用
loading="lazy"时未预留空间：懒加载图片更易出现这种抖动，必须配合尺寸属性或骨架占位
Flex容器设了 align-items: center 但图片还是撑高
align-items: center 只影响交叉轴上的对齐位置，并不压缩子项自身尺寸。如果图片本身高度超过容器可用高度，它仍会溢出或迫使容器扩张（尤其当容器是 flex-direction: column 或设置了 min-height）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否用了
min-height或height—— flex 项在align-items: stretch下默认拉伸，但一旦设了align-items: center，拉伸行为就失效，此时图片高度完全由自身决定 - 在图片上加
max-height: 100%并确保父容器有明确高度（比如flex: 0 0 300px），否则100%无参考基准 - 用
flex-shrink: 1允许图片在空间不足时缩小，但需搭配min-width/min-height: 0（防止 img 默认最小尺寸限制缩放）
