flex: 0 0 auto 才是安全写法：它明确禁用伸缩、锚定图片固有尺寸，需配合 width: auto、height: auto 和 min-width: 0，否则浏览器回退 flex-basis: 0 导致坍缩。
直接加 flex-shrink: 0 通常不管用——图片不是没被压缩，而是被压成一条线或细竖条，根本原因在于浏览器没拿到尺寸起点，不是“关掉压缩”就完事了。
为什么 flex-shrink: 0 单独写无效
Flex 子项默认 flex-shrink: 1，但只设 flex-shrink: 0 并不定义尺寸基准。浏览器会回退到 flex-basis: 0，尤其在窄容器或嵌套 Flex 中，<img alt="如何在CSS中解决Flexbox布局下图片被挤压变形" > 直接坍缩成像素级宽度，哪怕你写了 width: 200px 也无效。
-
flex: 0 0 auto才是等价且安全的写法：明确禁用伸缩、锚定图片固有尺寸（intrinsic size） - 必须同步声明
width: auto和height: auto，否则框架重置样式（如 Tailwind Preflight）可能覆盖原始比例 - 若父容器是
flex-direction: column，flex-basis控制的是高度，此时要检查max-height和object-fit是否配合到位
align-items: stretch 是拉伸主因，不是对齐问题
Flex 默认 align-items: stretch，在 flex-direction: row 下会让所有子项（包括 <img alt="如何在CSS中解决Flexbox布局下图片被挤压变形" >）强行撑满容器高度。哪怕图片原始高只有 50px，也会被拉成 200px——这不是图片出错，是 Flex 的默认行为。
- 改成
align-items: flex-start或center即可解除垂直拉伸 - 单个图片可用
align-self: flex-start，但仅当它是**直接 flex item** 时才生效 - 如果图片被包在一层
<div> 里，那 <code><div> 才是 flex item，<code>align-self加在<img alt="如何在CSS中解决Flexbox布局下图片被挤压变形" >上完全无效嵌套 Flex 中图片变细线？查
min-width: 0多层 Flex 嵌套（比如卡片 → 内容区 → 图片区）时，图片常被压成竖线或加载后闪动。这不是
object-fit失效，而是浏览器默认给替换元素（如<img alt="如何在CSS中解决Flexbox布局下图片被挤压变形" >）加了min-width: auto，拒绝缩得太小。立即学习“前端免费学习笔记（深入）”；
- 必须在
<img alt="如何在CSS中解决Flexbox布局下图片被挤压变形" >自身或其**直接父容器**上加min-width: 0 - Tailwind 用户对应类名是
min-w-0，别漏掉 - 典型安全组合：
img { max-width: 100%; height: auto; min-width: 0; flex: 0 0 auto; } - 用 DevTools 检查 computed styles，确认
flex-shrink真为0，且父元素display确实是flex
object-fit不是开关，它只在盒子稳定后才起作用object-fit: cover或contain控制的是图片内容如何填进盒子里，不是修复盒子本身。如果盒子早被flex-shrink: 1压成 2px 宽，object-fit只能在扭曲画布上裁图，毫无意义。- 前置条件必须满足：
flex: 0 0 auto; width: auto; height: auto; - 再加
object-fit: cover（填满裁剪）或object-fit: contain（完整显示） - 别混用
width: 100%和max-width: 100%，Safari 可能触发尺寸重算异常 - IE 完全不支持
object-fit，需 fallback 到background-image+background-size
真正容易被忽略的，是图片是否作为**直接 flex item**、父容器有没有**隐式嵌套 flex**、以及**加载时机**带来的尺寸跳变——这些在模拟器里全看不出，真机调试时得盯住 computed 的
Layout Width、flex-basis和min-width三个值。 - 必须在
