flex-shrink: 0单独无效，因仅跳过收缩计算却不定义尺寸起点，浏览器回退flex-basis: 0致图片坍缩；必须配合flex: 0 0 auto、width: auto、height: auto和min-width: 0才能确保按固有尺寸渲染并保持宽高比。

flex-shrink: 0 单独写为什么没用

它只禁用了收缩计算，但没告诉浏览器“从哪开始算尺寸”。浏览器回退到 flex-basis: 0，图片直接坍缩成一条竖线——尤其在窄容器或嵌套 Flex 中更明显。DevTools 里看到 flex-shrink 是 0，但图片渲染宽度只有 2px，就是这个原因。

img 必须加的最小可靠组合

不是加一两个属性就行，得协同控制外框、收缩行为和内容填充：

• flex: 0 0 auto：等价于 flex-grow: 0; flex-shrink: 0; flex-basis: auto，明确以图片固有尺寸为基准
• width: auto; height: auto：防 CSS 重置（如 Tailwind Preflight）或框架样式覆盖 intrinsic 尺寸
• min-width: 0：必须加在 自身或其**直接父容器**上，否则浏览器默认 min-width: auto 拒绝压缩替换元素
• 若需裁剪填满，再加 object-fit: cover；若需完整显示，用 object-fit: contain

align-items: stretch 是垂直拉伸的元凶

Flex 默认 align-items: stretch，在 flex-direction: row 下会让所有子项（包括 ）强行撑满容器高度。哪怕图片原始高只有 50px，也会被拉成 200px。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 主轴为水平方向时，父容器加 align-items: flex-start 或 center 即可解除垂直拉伸
• 若用了 flex-direction: column，交叉轴变成水平方向，此时要检查 justify-content 或加 min-width: 0
• align-self 只影响单个子项，且必须确保该 是直接 flex item

嵌套 Flex 中图片变细线或加载后闪动

这不是 object-fit 失效，而是多层 Flex 嵌套（比如卡片 → 内容区 → 图片区）触发了浏览器对替换元素的保守限制。

• 在 上加 min-width: 0 最直接；如果结构不允许（比如 被包在
  里），就加在它的**直接父容器**上
• React/Vue 动态加载时，首屏占位尺寸为 0，光靠 CSS 不够，得预设 aspect-ratio 或用 loading="lazy" + decoding="async"
• IE 全系不支持 object-fit，需降级用 background-image + background-size

实际中最容易被忽略的是：即使写了 flex: 0 0 auto，若父容器没设 display: flex，或被 flex: 1 这类简写隐式覆盖了 flex-shrink，整个组合就失效了。务必用 DevTools 检查 computed styles，确认 flex-shrink 真的是 0，且父元素 display 确实是 flex 或 inline-flex。