flex: 0 0 auto 是防止 flex 容器中图片失真的可靠写法，它等价于 flex-grow: 0; flex-shrink: 0; flex-basis: auto，三者缺一不可；单独设 flex-shrink: 0 会因回退到 flex-basis: 0 或被重置导致图片坍缩。
flex-shrink: 1 是默认压缩开关
图片在 Flex 容器里被压扁、拉长或缩成细线，不是因为图片本身有问题，而是浏览器默认给所有 flex item 设了 flex-shrink: 1。只要容器宽度不够，这个开关就会启动，强行按比例缩小图片——而图片是替换元素（replaced element），没有自动维持宽高比的机制，结果就是失真。
只写 flex-shrink: 0 为什么没用
单独加 flex-shrink: 0 看似关掉了压缩，但浏览器会回退到 flex-basis: 0，图片直接坍缩成一条线；或者回退到 flex-basis: auto，但又被外部 CSS 重置（比如 Tailwind 的 Preflight）覆盖掉 intrinsic 尺寸。
-
flex: 0 0 auto才是可靠写法，它等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto，三者缺一不可 - 漏掉
flex-basis（比如只写flex: 0 0）=flex-basis: 0px，图片消失 - 写
flex-basis: 100%会按父容器宽度算基准，高度仍塌陷，尤其在flex-direction: column下更危险
object-fit 为什么看起来失效
object-fit 不是变形修复开关，它只负责“把图片内容塞进已有盒子”。如果盒子已经被 flex-shrink: 1 压窄，object-fit: cover 只能在扭曲画布上裁图，毫无意义。
- 必须先稳住外框：
flex: 0 0 auto; width: auto; height: auto; - 再加
object-fit: cover或object-fit: contain控制内容填充方式 - 别写
width: 100%; height: 100%——这是强制拉伸，直接破坏比例 - 嵌套 Flex 时，
min-width: 0得加在或其**直接父容器**上，否则
min-width: auto默认阻止缩得太小
动态加载和响应式场景下的隐藏陷阱
React/Vue 懒加载、SSR 首屏、<picture></picture> 切换资源时，图片初始尺寸为 0，加载后突然撑开会触发重排——这时 flex-shrink: 0 已经来不及了。
- 优先用
aspect-ratio: 16 / 9预留空间（Chrome 88+、Safari 15.4+） - 旧 Safari fallback：
max-width: 100%; height: auto;+flex: 0 0 auto;+min-width: 0 - IE 完全不支持
object-fit，得用background-image替代 - 真正容易被忽略的是：图片是否为**直接 flex item**、父容器是否有**隐式嵌套 flex**、以及**加载时机**带来的尺寸跳变——这些会让
flex-shrink: 0的作用范围模糊，必须用 DevTools 检查 computed styles 确认生效节点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
