90%的Flex图片拉伸/压缩问题源于flex-shrink非0和align-items: stretch默认值；需确认computed中flex-shrink确为0、父容器display为flex、img为直接子元素，并将align-items改为flex-start等以禁用交叉轴拉伸。
直接看 flex-shrink 和 align-items 这两个值，90% 的“莫名拉伸/压缩”都卡在这儿。
检查 computed styles 里 flex-shrink 是否真为 0
你以为写了 flex-shrink: 0 就安全了？不一定。常见失效原因：
-
flex: 1或flex: auto这类简写会覆盖后续单独写的flex-shrink: 0，优先级更高 - 父容器没设
display: flex或display: inline-flex，flex-shrink根本不解析 - 子元素是内联元素（比如没加
display: block的<img>），某些浏览器下计算逻辑异常 - Chrome/Firefox 默认给 flex 子项加
min-width: auto，得配合min-width: 0才真正释放收缩限制
用 DevTools 的 “Computed” 面板点开 flex-shrink，确认它显示的是 0，而不是被覆盖成 1 或 unset。
确认 align-items 没被默认值劫持高度
align-items: stretch 是 flex 容器的默认行为，它不是 bug，是设计——但它会让 <img> 在交叉轴方向（垂直方向，当 flex-direction: row 时）被硬拉满父容器高度，直接破坏宽高比。
立即学习“前端免费学习笔记（深入）”；
- 如果父容器有固定高度（如
height: 200px），而图片原始高只有 60px，它就会被垂直拉伸成 200px -
align-self: center只控制对齐位置，不阻止拉伸；必须显式改父容器的align-items: flex-start或align-items: center - 若父容器是
flex-direction: column，交叉轴变成水平方向，此时align-items控制的是宽度，要检查是否横向被撑开
临时加一句 align-items: flex-start !important 看图片是否立刻恢复原比例，就能快速验证是不是它在作祟。
验证 <img> 是不是直接 flex item
嵌套一层 <div> 再放 <img>，是 Flex 布局中图片变形最隐蔽的元凶之一。
-
align-items: stretch和flex-shrink只作用于**直接子元素**；包在<div>里的<img>完全不受控 - 外层
<div>可能继承min-width: auto，再套一层 flex 后，图片常被压成细长竖线 - object-fit 生效的前提是图片自身盒模型稳定；如果外框已塌缩，
object-fit: cover只是在扭曲画布上裁图
删掉中间层，让 <img> 直接作为 flex 容器的子元素，并确保它带 flex: 0 0 auto; width: auto; height: auto;。
排查基线间隙和加载抖动这类“隐形膨胀”
图片没设 display: block 时，浏览器按内联元素处理，会在下方留约 4px 的基线间隙——这个间隙会被算进 flex 容器高度，导致整体比预期高。
- 给
<img>加display: block或vertical-align: top即可消除 - 图片异步加载时若没预设尺寸（
width/height属性或aspect-ratio），渲染初期占位为 0×0，加载后突然撑高，触发重排和滚动条闪现 - 移动端尤其明显：懒加载 + 无尺寸属性 +
flex-shrink: 1→ 先塌缩、再撑开、再挤压，三连击
最稳的占位方案是原生 <img width="300" height="200">，现代浏览器会据此生成 aspect ratio box，CSS 覆盖尺寸也不失比例。
真正难缠的不是某一条规则写错，而是多个默认行为叠加：flex-shrink: 1 + align-items: stretch + min-width: auto + inline 基线 + 异步加载 —— 它们各自合理，合起来就让图片在不同设备上忽胖忽瘦。动手前先打开 DevTools，盯住 computed styles 里的那几个关键值，比猜更省时间。
