真正起效的是 flex: 0 0 auto（等价于 flex-grow: 0、flex-shrink: 0、flex-basis: auto）并配合 width: auto、height: auto 和 min-width: 0，而非单独 flex-shrink: 0；同时需覆盖 align-items: stretch 默认行为，并确保 img 是直接 flex item。
flex-shrink: 0 单独写根本压不住变形
只加 flex-shrink: 0 看似禁用了收缩，但浏览器会回退到 flex-basis: 0，图片直接坍缩成一条线；若父容器宽度窄，它又可能溢出或触发横向滚动。真正起效的不是“关掉收缩”，而是“锚定原始尺寸”。
必须组合使用：flex: 0 0 auto（等价于 flex-grow: 0、flex-shrink: 0、flex-basis: auto），再显式补上 width: auto 和 height: auto——否则框架重置样式（如 Tailwind Preflight）可能覆盖图片固有比例。
-
flex: 0 0 auto是底线，不能省略或拆开写 - 若父容器是
flex-direction: column，flex-basis控制的是高度，此时要同步检查max-height和object-fit配合方式 - 用 DevTools 查看 computed styles，确认
flex-shrink确实为0，且父元素display真的是flex或inline-flex
align-items: stretch 是拉伸元凶，不是 bug 是默认行为
Flex 容器默认 align-items: stretch，会让所有子项（包括 <img>）在交叉轴方向强行撑满高度。主轴为水平时（flex-direction: row），交叉轴就是垂直方向——哪怕图片是 16:9，也会被垂直拉伸。
这不是图片自身问题，是布局层强制干预。解决方法很简单：显式覆盖这个值。
- 设
align-items: flex-start或align-items: center，让图片按自身高度渲染 - 若用了
flex-direction: column，交叉轴变成水平方向，此时要检查justify-content是否过度约束了宽度 -
align-self: center只控制定位，不防变形；它对嵌套在<div> 里的图片完全无效 <h3>object-fit 不生效？先看外框有没有稳住</h3> <p><code>object-fit: cover或object-fit: contain不是开关，它只在图片已有稳定外框时才起作用。如果<img>已被flex-shrink: 1压成细长条，object-fit只能在扭曲画布上裁图，毫无意义。顺序不能错：
- 确保
<img>是直接 flex item（父元素display: flex），不要中间套一层<div> <li>加 <code>flex: 0 0 auto; width: auto; height: auto; - 再加
object-fit: cover（填满裁剪）或object-fit: contain（完整显示） - 绝对别写
width: 100%; height: 100%——这是强制拉伸，直接破坏比例 - 典型安全组合：
img { max-width: 100%; height: auto; min-width: 0; flex: 0 0 auto; } - 若父容器用了
position: fixed或max-width: 100%，要额外检查是否限制了宽度基准 - 移动端尤其要注意：几个默认行为叠加（如
max-width: 100%+ 默认flex-shrink: 1+ 无height: auto）会快速失守
嵌套 Flex 中图片变细线？查 min-width: 0
多层 Flex 嵌套（比如卡片 → 内容区 → 图片区）时，图片常被压成细长竖线或加载后闪动错位。这不是
object-fit失效，而是浏览器默认min-width: auto拒绝把替换元素缩太小。解决方案是在
<img>或其**直接父容器**上加min-width: 0，告诉 Flex：“这玩意儿可以缩到 0”。align-items就好了，其实min-width: auto还在底层卡着；你以为加了object-fit就万无一失，其实外框早被flex-basis: 0拆没了。调试时优先看 computed styles，而不是只扫 CSS 规则。 - 确保
