为什么CSS Flex布局会导致图片被压缩变形？

Flex图片变形主因是flex-shrink:1+align-items:stretch+无宽高比保护；需用flex:0 0 auto+width:auto+height:auto稳外框，再配object-fit裁剪。

Flex 布局本身不会“故意”压缩图片，但默认行为组合起来会——flex-shrink: 1 + align-items: stretch + 替换元素（img）无自动宽高比保护，三者叠加就是变形的完整链条。

flex-shrink: 1 是默认压缩开关

所有 Flex 子项默认带 flex-shrink: 1。只要容器主轴空间不足，浏览器就会按比例缩小子项。而 img 是替换元素，它没有内在的“弹性缩放逻辑”，缩小时只压宽度、不维持高宽比，结果就是拉长或压扁。

1. DevTools 里看到 img 渲染宽度远小于原始尺寸？大概率是 flex-shrink 在起作用
2. 只写 flex-shrink: 0 不够：它不定义尺寸起点，浏览器会 fallback 到 flex-basis: 0，图片直接坍缩成一条线
3. 真正生效的是 flex: 0 0 auto，等价于 flex-grow: 0 + flex-shrink: 0 + flex-basis: auto，三者缺一不可

align-items: stretch 会偷偷拉高图片

当父容器是 display: flex 且 flex-direction: row（默认）时，交叉轴是垂直方向。align-items: stretch（默认值）会让所有子项（包括 img）拉伸填满容器高度——哪怕图片原始高度只有 60px，父容器设了 height: 240px，它也会被硬拉到 240px，宽高比瞬间崩坏。

1. align-self: center 或 align-items: flex-start 只改变定位，不阻止拉伸；它们只是让图片“不被撑满”，但不解决主轴压缩问题
2. 如果父容器是 flex-direction: column，交叉轴变成水平方向，此时 align-items 控制的是宽度，得盯紧 flex-basis 是否作用在高度上
3. 图片必须是**直接 flex item**，否则 align-self 根本不生效

object-fit 不是变形修复开关，而是内容裁剪控制器

object-fit: cover 或 contain 只负责“把图片内容塞进已有盒子”，它不管盒子自己有没有被 Flex 拉扁。如果外框已经被 flex-shrink: 1 压窄、又被 align-items: stretch 拉高，object-fit 就只能在扭曲画布上裁图，毫无意义。

1. 必须先稳住外框：flex: 0 0 auto + width: auto + height: auto
2. 再加 object-fit：此时才有稳定参考系可裁
3. 别写 width: 100% + height: 100%：这是强制拉伸，直接破坏比例
4. IE 完全不支持 object-fit，旧 Safari 对 height: auto + object-fit 兼容性差，需加 display: block 消除 inline 基线间隙

嵌套 Flex 和动态加载让问题更隐蔽

多层 Flex 嵌套（比如卡片 → 内容区 → 图片区）或 React/Vue 动态加载时，图片初始尺寸为 0，加载后突然撑开会触发重排——这时 CSS 规则已经来不及干预。

1. 浏览器默认给替换元素设 min-width: auto，拒绝缩太小；在嵌套场景下，这会导致图片被压成细长竖线
2. 解决方案：在 img 自身或其**直接父容器**上加 min-width: 0
3. 响应式场景优先用 aspect-ratio: 16 / 9 预留空间（Chrome 88+、Safari 15.4+），旧版 Safari fallback 用 max-width: 100% + height: auto + flex: 0 0 auto + min-width: 0
4. 真正容易被忽略的不是写法，而是三个隐性点：图片是否为**直接 flex item**、父容器是否有**隐式嵌套 flex**、以及**加载时机**带来的尺寸跳变——这些都会让 flex-shrink: 0 的作用范围模糊，必须用 DevTools 检查 computed styles 确认生效节点