object-fit 必须配合明确宽高才生效，因其仅控制内容填充而非盒模型尺寸；常见错误是仅设 object-fit 而未约束图片或容器尺寸，导致失效。
object-fit 是解决 Flex 布局中图片拉伸变形最直接有效的手段，但它**必须配合明确的宽高约束才生效**，单独加 object-fit: cover 几乎总是没用。
为什么只写 object-fit 没效果
浏览器对 img 元素默认按 intrinsic size（原始尺寸）渲染；一旦没设 width 或 height，object-fit 就无“容器”可作用——它不定义盒模型大小，只控制内容如何填进已有盒子。
- 常见错误：只加
img { object-fit: cover; }，但父容器没高度、img本身又没width/height - 检查 computed styles：确认
img的实际渲染宽高不是auto，否则object-fit被忽略 - Flex 容器若设了
align-items: stretch（默认值）且有固定height，图片会被强制撑高，此时必须同时约束其自身尺寸
object-fit 必须搭配的尺寸写法
三者缺一不可：容器尺寸锚定 + 图片盒模型显式声明 + object-fit 控制填充逻辑。
- 推荐组合：
img { width: 100%; height: 100%; object-fit: cover; }（适用于卡片图、头像等需填满的场景） - 安全兜底：
img { width: 100%; height: auto; object-fit: contain; }（适合图标、图表，保留完整内容） - 避免混用：
max-width: 100%和width: 100%同时存在可能触发 Safari 尺寸重算异常 - 响应式注意：若父容器宽度动态变化，
width: 100%仍有效；但若用flex: 1，需额外加flex-shrink: 0防压缩
和 flex-shrink、align-self 的关系
object-fit 不替代 flex-shrink: 0，也不受 align-self 影响——它们作用于不同层级。
-
flex-shrink: 0稳住外框不被 Flex 主轴压缩（比如窄屏下图片缩成一条线） -
align-self: center只控制图片在交叉轴上的对齐位置，不影响缩放行为 - 典型失效链：
flex-shrink: 1→ 外框被压扁 →object-fit: cover在扭曲画布上裁剪 → 结果仍是变形 - 稳妥写法：
img { flex-shrink: 0; width: 100%; height: 100%; object-fit: cover; }
兼容性与嵌套陷阱
IE 完全不支持 object-fit，旧版 Safari 对嵌套 Flex 中的 object-fit 行为不稳定。
- 必须确保图片的**直接父容器**有明确高度（或通过
min-height、aspect-ratio锚定） - 多层 Flex 嵌套时，
object-fit生效前提是图片是该层 Flex 的直接子项；若中间隔了div，得把样式加到那个div上并设display: block - 兼容 IE 方案：
background-image+background-size: cover，但会丢失alt、srcset和懒加载能力 - @supports 回退写法可用：
@supports not (object-fit: cover) { img { ... } }
flex-direction: column（此时交叉轴是水平方向）、以及动态加载时占位尺寸为 0 导致初始布局塌陷——这些都会让 object-fit 在渲染初期完全失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
