flex容器内图片变形的根本原因是默认flex-shrink:1主动压缩，必须用flex:0 0 auto锚定固有尺寸，并配合width:auto、height:auto和object-fit，否则仅设flex-shrink:0会导致坍缩或拉伸。
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 重置或框架样式（如 Tailwind Preflight）可能覆盖原始比例 - 在
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 动态加载时图片突然撑开怎么办？
光靠 CSS 不够，得预设结构稳定性。初始占位尺寸为 0，加载后突然撑开会触发重排，flex-shrink: 0也救不了。
- 优先用
aspect-ratio: 16 / 9（Chrome 88+、Safari 15.4+），比 padding-top hack 更干净 - 旧 Safari 兼容 fallback：
max-width: 100%+height: auto+flex: 0 0 auto - 真正容易被忽略的，是图片是否作为直接 flex item、父容器是否有隐式嵌套 flex、以及加载时机带来的尺寸跳变——这些都比写错一行 CSS 更难调试
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
