flex子元素缩小时变形的根本原因是默认flex-shrink:1主动压缩，需设flex:0 0 auto并配合width:auto、height:auto锚定固有尺寸，再用object-fit控制裁剪或缩放。
Flex子元素缩小时变形，根本不是容器太小，而是默认 flex-shrink: 1 在主动压缩——关掉它，再锚定尺寸起点，问题就解了大半。
为什么只写 flex-shrink: 0 没用？
浏览器看到 flex-shrink: 0 确实跳过收缩计算，但它不定义尺寸起点。若没配 flex-basis，默认回退到 flex-basis: 0，<img> 直接坍缩成一条线；若写了 flex-basis: 100%，又可能按父容器宽度拉伸，高度照样塌陷。
-
flex: 0 0 auto是最稳的等价写法，明确禁用伸缩、锚定图片固有尺寸（intrinsic size） - 必须同步声明
width: auto和height: auto，否则 CSS 重置或框架样式可能覆盖原始比例 - 在
flex-direction: column容器里，flex-basis控制的是高度，此时得检查max-height和object-fit是否配合到位
object-fit 为什么看起来没生效？
object-fit 不是开关，它只在图片已有稳定外框时才起作用。如果 <img> 已被 flex-shrink: 1 压成窄条，object-fit: cover 只能在扭曲画布上裁图，毫无意义。
- 先确保外框稳定：
flex: 0 0 auto+width: auto+height: auto - 再加
object-fit: cover（填满裁剪）或object-fit: contain（完整显示） - 别写
width: 100%+height: 100%——这是强制拉伸，直接破坏比例 - IE 不支持
object-fit，需 fallback 到background-image+background-size
嵌套 Flex 中图片变成细长竖线怎么办？
多层 Flex 嵌套（比如卡片 → 内容区 → 图片区）时，图片常被压成竖线或加载后闪动错位。这不是 object-fit 失效，而是浏览器默认 min-width: auto 拒绝把替换元素缩太小。
- 在
<img>或其**直接父容器**上加min-width: 0，告诉 Flex：“这玩意儿可以缩到 0” - 典型安全组合：
img { max-width: 100%; height: auto; min-width: 0; flex: 0 0 auto; } - 用 DevTools 检查 computed styles，确认
flex-shrink确实为0，且父元素display真的是flex - React/Vue 动态加载时占位尺寸为 0，加载后突然撑开触发重排——光靠 CSS 不够，得预设
aspect-ratio或占位容器
真正容易被忽略的，是图片是否作为**直接 flex item**、父容器是否有**隐式嵌套 flex**、以及**加载时机**带来的尺寸跳变——这些都比写错一行 CSS 更难调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
