图片在flex容器中伸缩失常的根本原因是浏览器默认设置min-width: auto锁定其固有尺寸，必须显式添加min-width: 0解除该限制，再配合height: auto、flex: 1 1 0及object-fit等属性协同控制外框与内容缩放。
图片在 Flex 容器里伸缩失常，不是它“不肯缩”，而是浏览器默认给它设了“最低底线”。关键不在 flex-shrink 数值本身，而在于解除图片固有的尺寸锁定。
先破默认最小宽度：min-width: 0 是核心
HTML 是替换元素，浏览器会按其原始尺寸设 min-width: auto —— 这在 Flex 里等效于“不能缩到比原图还小”。哪怕你写了 width: 100% 或 flex: 1，它也卡住不动。
- 必须显式加 min-width: 0，这是所有弹性缩放的前提
- 只写 width: 200px 或 max-width: 100% 不够，没这行，flex-shrink 基本失效
- 配合 height: auto，确保缩放时宽高比不被破坏
再定伸缩行为：flex-shrink 和 flex-basis 要配对用
flex-shrink 不是“缩多少”，而是参与加权分配。想让图片按预期比例收缩，得控制它的计算基准：
- 设 flex-basis: 0（或用 flex: 1 1 0），让浏览器从零开始均分空间，避免受原图尺寸干扰
- 若需不同图片按 2:1 比例收缩，可设 flex: 2 2 0 和 flex: 1 1 0，权重乘积才真正决定收缩量
- 要完全禁止压缩（如 logo、图标），直接 flex-shrink: 0，比 min-width 更彻底
防拉伸变形：外框稳住，内容才可控
object-fit 再好，也救不了被 Flex 拉歪的容器。必须分两步走：
- 先用 max-width: 100% + height: auto + flex-shrink: 0 锁死外框比例
- 再加 object-fit: contain 或 cover 控制图片内容如何填入
- 别对 img 直接写 width/height 固定值，除非你明确要裁切
响应式更稳：优先用 vw/vh，少依赖百分比
如果图片尺寸要严格对应视口（比如导航栏 logo），用百分比 width 很容易因父容器未铺满而失准：
- 改用 width: 12.3vw，语义清晰，不依赖父级宽度链
- 避免嵌套 flex 容器里多层 % 单位，每层都可能放大误差
- 搭配 box-sizing: border-box 和重置 html/body 的 margin/padding，确保 100vw 真正可用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
