flex-shrink: 0不能单独保证图片不被压扁，需配合min-width: 0和max-width: 100%等约束，并确保图片为flex容器的直接子项且父容器有明确主轴尺寸。
flex-shrink: 0 真的能保图片不被压扁吗？
不一定。它只阻止缩放，但若父容器 flex-direction 是 column、或图片被包裹在多层 flex 容器里，flex-shrink: 0 可能根本没生效——因为 shrink 行为由直接父级 flex 容器控制，不是祖辈。
常见错误现象：img 在 display: flex 的 div 里仍被压缩成窄条，检查 computed styles 会发现 flex-shrink 确实是 0，但实际尺寸还是小了。原因往往是：图片的父元素没设 width 或 min-width，导致其内容区塌陷，图片被迫按“可用宽度”渲染（哪怕 shrink 为 0）。
- 必须确保图片直系父容器有明确主轴尺寸约束（比如
width: 100%或min-width: 0） - 如果父容器本身是
flex且未设flex-basis，它可能先塌缩，再把挤压传给子元素 -
flex-shrink: 0对img生效的前提是：该img是父级 flex 容器的**直接子项**
为什么只设 flex-shrink: 0 还不够？
Flex 布局中，一个元素的最终尺寸 = flex-basis（基础尺寸） + 剩余空间分配 + flex-shrink 调整。即使 flex-shrink: 0，若 flex-basis 是 auto（默认），浏览器仍会按图片原始尺寸计算，但若容器太窄，原始尺寸会被强制截断（尤其在没有 min-width 时）。
- 推荐显式设置
flex-basis: auto或具体值（如flex-basis: 200px），避免依赖隐式行为 - 配合
min-width: 0（对父容器）或min-width: fit-content（对图片自身），防止 flex 算法把内容区压到 0 - 注意：Safari 对
min-width: fit-content支持较晚（iOS 14.5+），老版本需 fallback 到min-width: 1px
更稳妥的图片防挤压组合写法
单靠 flex-shrink: 0 风险高，真实项目里建议用三件套：
立即学习“前端免费学习笔记（深入）”；
img {
flex-shrink: 0;
min-width: 0;
max-width: 100%;
}
其中 max-width: 100% 防止图片撑破容器，min-width: 0 让 flex 算法允许内容区收缩到 0（从而让 flex-shrink: 0 有机会起作用），而 flex-shrink: 0 才真正锁住不缩放。
- 如果图片需要保持宽高比，额外加
height: auto（否则某些场景下 height 会被 flex 强制设为 0） - 不要对
img设width: 100%—— 它会覆盖flex-basis，导致flex-shrink失效 - 若图片在
flex-direction: column容器中被压高，问题通常出在height约束，此时要改flex-shrink为flex-shrink: 0并配min-height: 0
遇到 object-fit: cover 时的特殊处理
当图片用 object-fit: cover 且父容器尺寸不稳定时，flex-shrink: 0 依然可能失效——因为 cover 会优先保证填满容器，而 flex 布局可能先压缩容器再让图片 cover，结果就是图片被裁切而非等比缩放。
- 此时应把图片包一层
div，对该 wrapper 设flex-shrink: 0和min-width: 0，图片自身只设width: 100%+height: 100%+object-fit: cover - 避免在
img上同时设flex-shrink: 0和object-fit，两者逻辑冲突：前者拒缩放，后者主动缩放裁剪 - Chrome 115+ 开始对
object-fit+ flex 的交互有优化，但 Safari 仍容易出现布局抖动，建议用contain替代cover测试是否缓解
最常被忽略的是：flex 容器的 align-items 和 justify-content 会影响图片的“可用空间”计算，哪怕 shrink 是 0，居中对齐也可能触发二次 layout 挤压。真要稳，就得连父容器的对齐方式一起看。
