图片被拉宽压扁的根本原因是flex-shrink:1导致容器缩窄，object-fit无法挽救；必须配合flex:0 0 auto和min-width:0才能保障等比缩放。
为什么只加 object-fit 图片还是被拉宽压扁
因为 object-fit 只控制“图片内容怎么塞进盒子里”，但前提是盒子得先稳住形状。Flex 默认给每个子项设了 flex-shrink: 1，图片作为替换元素，在窄容器里会被无差别压缩——盒子本身已经变窄了，object-fit: cover 只能在扭曲的框里裁图。
常见现象：object-fit: cover 加了，图片仍横向拉宽、纵向压扁；DevTools 里看到图片渲染宽度远小于原始尺寸，说明它已被 flex 主动压窄。
- 错误写法：
img { width: 100%; height: 200px; object-fit: cover; }—— 没关flex-shrink，容器一窄，图片就跟着窄 - 必须配
flex-shrink: 0或更稳妥的flex: 0 0 auto -
flex-shrink: 0单独写无效：它依赖flex-basis计算，漏掉会回退到auto，在嵌套场景下仍可能被干扰
用 flex: 0 0 auto 还是 flex-shrink: 0
flex: 0 0 auto 是更可靠的选择，它等价于 flex-grow: 0; flex-shrink: 0; flex-basis: auto，三者缺一不可：
-
flex-grow: 0防止图片意外拉伸占满剩余空间 -
flex-shrink: 0切断压缩路径 -
flex-basis: auto让浏览器按图片固有尺寸或 CSS 宽高推导基准，比写死flex-basis: 100%更安全（后者按父容器宽度算，若父容器高度没约束，图片仍可能纵向塌陷） - 别只写
flex: 0 0—— 省略flex-basis相当于flex-basis: 0px，图片会坍缩成一条线
响应式场景下如何保持 16:9 等比缩放
固定 height 不灵活，现代解法靠 aspect-ratio，但它必须和 width + object-fit 协同生效：
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; flex: 0 0 auto; } - 兼容旧 Safari（
aspect-ratio不支持）：用max-width: 100%; height: auto;+flex: 0 0 auto+min-width: 0 - 绝对不要：
width: 100%; height: 100%—— 强制拉伸，直接破坏比例 - 若需留白完整显示，换
object-fit: contain，但要确保父容器有足够空间，否则留白过大
嵌套 Flex 中图片突然变细或消失
不是 object-fit 失效，而是多层 Flex 嵌套时，min-width: auto（替换元素默认值）阻止图片缩得太小，导致布局僵死：
- 典型表现：图片被压成像素级细线，或加载后闪动错位
- 解决方案：在图片自身或其**直接父容器**上加
min-width: 0 - 必须配合
flex: 0 0 auto——min-width: 0允许缩，flex: 0 0 auto防止压，两者缺一不可 - 检查是否被外层
align-items: stretch影响：主轴为row时，交叉轴是垂直方向，align-items: stretch会让图片被强制撑高；可改用align-items: flex-start或对图片设align-self: center
flex 容器尺寸 → 图片容器尺寸 → object-fit 作用域。断掉任意一环，比例就失守；尤其是 flex-shrink: 0 和 min-width: 0，一个管“不许压”，一个管“允许缩”，表面无关，实则必须共存。 
