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 是替换元素，它没有内在的“弹性缩放逻辑”，缩小时只压宽度、不维持高宽比，结果就是拉长或压扁。
- DevTools 里看到
img渲染宽度远小于原始尺寸？大概率是flex-shrink在起作用 - 只写
flex-shrink: 0不够：它不定义尺寸起点，浏览器会 fallback 到flex-basis: 0，图片直接坍缩成一条线 - 真正生效的是
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，宽高比瞬间崩坏。
-
align-self: center或align-items: flex-start只改变定位，不阻止拉伸；它们只是让图片“不被撑满”，但不解决主轴压缩问题 - 如果父容器是
flex-direction: column，交叉轴变成水平方向，此时align-items控制的是宽度，得盯紧flex-basis是否作用在高度上 - 图片必须是**直接 flex item**，否则
align-self根本不生效
object-fit 不是变形修复开关，而是内容裁剪控制器
object-fit: cover 或 contain 只负责“把图片内容塞进已有盒子”，它不管盒子自己有没有被 Flex 拉扁。如果外框已经被 flex-shrink: 1 压窄、又被 align-items: stretch 拉高，object-fit 就只能在扭曲画布上裁图，毫无意义。
- 必须先稳住外框：
flex: 0 0 auto+width: auto+height: auto - 再加
object-fit：此时才有稳定参考系可裁 - 别写
width: 100%+height: 100%：这是强制拉伸，直接破坏比例 - IE 完全不支持
object-fit，旧 Safari 对height: auto+object-fit兼容性差，需加display: block消除 inline 基线间隙
嵌套 Flex 和动态加载让问题更隐蔽
多层 Flex 嵌套（比如卡片 → 内容区 → 图片区）或 React/Vue 动态加载时，图片初始尺寸为 0，加载后突然撑开会触发重排——这时 CSS 规则已经来不及干预。
- 浏览器默认给替换元素设
min-width: auto，拒绝缩太小；在嵌套场景下，这会导致图片被压成细长竖线 - 解决方案：在
img自身或其**直接父容器**上加min-width: 0 - 响应式场景优先用
aspect-ratio: 16 / 9预留空间（Chrome 88+、Safari 15.4+），旧版 Safari fallback 用max-width: 100%+height: auto+flex: 0 0 auto+min-width: 0 - 真正容易被忽略的不是写法，而是三个隐性点：图片是否为**直接 flex item**、父容器是否有**隐式嵌套 flex**、以及**加载时机**带来的尺寸跳变——这些都会让
flex-shrink: 0的作用范围模糊，必须用 DevTools 检查 computed styles 确认生效节点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
