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：必须加在<img alt="在CSS中如何解决flex布局下图片被挤压变形的问题？" >自身或其**直接父容器**上，否则浏览器默认min-width: auto拒绝压缩替换元素 - 若需裁剪填满，再加
object-fit: cover；若需完整显示，用object-fit: contain
align-items: stretch 是垂直拉伸的元凶
Flex 默认 align-items: stretch，在 flex-direction: row 下会让所有子项（包括 <img alt="在CSS中如何解决flex布局下图片被挤压变形的问题？" >）强行撑满容器高度。哪怕图片原始高只有 50px，也会被拉成 200px。
- 主轴为水平方向时，父容器加
align-items: flex-start或center即可解除垂直拉伸 - 若用了
flex-direction: column，交叉轴变成水平方向，此时要检查justify-content或加min-width: 0 -
align-self只影响单个子项，且必须确保该<img alt="在CSS中如何解决flex布局下图片被挤压变形的问题？" >是直接 flex item
嵌套 Flex 中图片变细线或加载后闪动
这不是 object-fit 失效，而是多层 Flex 嵌套（比如卡片 → 内容区 → 图片区）触发了浏览器对替换元素的保守限制。
立即学习“前端免费学习笔记（深入）”；
- 在
<img alt="在CSS中如何解决flex布局下图片被挤压变形的问题？" >上加min-width: 0最直接；如果结构不允许（比如<img alt="在CSS中如何解决flex布局下图片被挤压变形的问题？" >被包在<div> 里），就加在它的**直接父容器**上 <li>React/Vue 动态加载时，首屏占位尺寸为 0，光靠 CSS 不够，得预设 <code>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。
