object-fit: cover 生效前提需先锁定图片尺寸行为：必须设置 flex: 0 0 auto、min-width: 0、width: auto、height: auto，并修正 align-items: stretch 导致的垂直拉伸问题。
直接写 object-fit: cover 没用，Safari 会先按默认规则把图片压成细线或拉伸变形，object-fit 只能在稳定外框里生效——得先锁住图片尺寸行为，再谈裁剪。
为什么 flex-shrink: 0 单独加无效
浏览器看到 flex-shrink: 0 确实跳过收缩计算，但它不定义起点。若没配 flex-basis，就回退到 flex-basis: 0，图片直接坍缩成一条线；若写了 flex-basis: 100%，又可能按父宽拉伸，而父高没约束时纵向照样塌陷。
-
flex: 0 0 auto是最稳的等价写法，明确禁用伸缩、锚定固有尺寸（intrinsic size） - 必须同步声明
width: auto和height: auto，否则框架重置样式可能覆盖原始比例 - 在
flex-direction: column容器里，flex-basis控制的是高度，此时得检查max-height和object-fit是否配合到位
min-width: 0 必须加在 img 或其直接父容器上
嵌套 Flex（比如卡片 → 内容区 → 图片区）时，图片常被压成竖线或加载后闪动错位。这不是 object-fit 失效，而是浏览器默认 min-width: auto 拒绝把替换元素缩太小。
- 在
img自身或其**直接父容器**上加min-width: 0，告诉 Flex：“这玩意儿可以缩到 0” - 典型安全组合：
img { max-width: 100%; height: auto; min-width: 0; flex: 0 0 auto; } - 用 DevTools 检查 computed styles，确认
flex-shrink真为 0，且父元素display确实是flex
align-items: stretch 是垂直拉伸的真正元凶
Flex 默认 align-items: stretch，在 flex-direction: row 下会让所有子项（包括 img）强行撑满容器高度。哪怕图片原始高只有 50px，也会被拉成 200px —— 这不是图片本身出错，是 Flex 的默认行为。
- 改成
align-items: flex-start或center即可解除垂直拉伸 - 如果用了
flex-direction: column，交叉轴变成水平方向，此时要改justify-content或加min-width: 0 -
align-self只影响单个子项，但必须确保该img是直接 flex item，否则无效
最容易被忽略的是三层耦合：flex 容器尺寸 → 图片容器尺寸 → object-fit 作用域。断掉任意一环，比例就失守；尤其是 flex-shrink: 0 和 min-width: 0 看似无关，实则一个管“不许压”，一个管“允许缩”，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
