根本原因是align-items: stretch在交叉轴强制撑高（或撑宽），叠加flex-shrink: 1默认压缩及object-fit未生效；需组合使用flex: 0 0 auto、width: auto、height: auto、min-width: 0并显式覆盖align-items，且img必须为直接flex item。
Flex子元素中的图片被拉伸变形，根本不是图片“自己想变”，而是align-items: stretch在交叉轴上强制撑高（或撑宽），叠加flex-shrink: 1默认压缩、以及object-fit未生效三者共同作用的结果。只改一个属性大概率无效。
为什么align-items: stretch是拉伸元凶
Flex容器主轴为row（默认）时，交叉轴是垂直方向。align-items: stretch会让所有子项（包括<img>）在垂直方向强行撑满容器高度——哪怕图片原始比例是16:9，也会被垂直拉伸成“胖图”。这不是bug，是规范行为。
- 设
align-items: flex-start或align-items: center可立即止住垂直拉伸，但仅解决对齐，不保比例 - 若父容器是
flex-direction: column，交叉轴变成水平方向，此时align-items影响的是宽度，要检查justify-content是否过度约束了水平空间 -
align-self: center只控制单个子项定位，对缩放和尺寸无任何干预，加了也白加
为什么flex-shrink: 0单独写根本压不住变形
浏览器看到flex-shrink: 0确实跳过收缩计算，但它不定义尺寸起点。若没配flex-basis，默认回退到flex-basis: 0，<img>直接坍缩成一条线；若写了flex-basis: 100%，又可能按父容器宽度拉伸，高度照样塌陷。
- 必须用
flex: 0 0 auto（等价于flex-grow: 0、flex-shrink: 0、flex-basis: auto），明确禁用伸缩、锚定固有尺寸 - Tailwind用户注意：
shrink-0≠flex: 0 0 auto，它只设flex-shrink: 0，缺flex-basis: auto，得手动补style="width: auto; height: auto;"或加插件 - IE11需额外加
-ms-flex: 0 0 auto，否则兼容性断层
为什么object-fit看起来没生效
object-fit: cover或object-fit: contain不是开关，它只在图片已有稳定外框时才起作用。如果<img>已被flex-shrink: 1压成窄条，object-fit只能在扭曲画布上裁图，毫无意义。
- 生效前提：先稳外框——
flex: 0 0 auto+width: auto+height: auto - 再加
object-fit: cover（填满裁剪）或object-fit: contain（完整显示） - 绝对别写
width: 100%+height: 100%，这是强制拉伸，直接破坏比例 - IE不支持
object-fit，兜底方案是用background-image+background-size: cover
嵌套Flex中图片被压成细长竖线怎么办
多层Flex嵌套（如卡片 → 内容区 → 图片区）时，图片常被压成细长竖线或加载后闪动错位。这不是object-fit失效，而是浏览器默认给替换元素设min-width: auto，拒绝缩太小。
- 必须在
<img>或其**直接父容器**上加min-width: 0（Tailwind对应min-w-0） - 典型安全组合：
img { max-width: 100%; height: auto; min-width: 0; flex: 0 0 auto; } - 用DevTools检查computed styles，确认
flex-shrink确实是0，且父元素display真的是flex或inline-flex
最容易被忽略的点：图片是否作为直接flex item。中间套一层<div>，上面所有规则都会失效；动态加载场景下，初始占位为0，光靠CSS不够，得预设<code>aspect-ratio或结构占位。
