object-fit失效主因是容器无明确宽高，需同时满足三条件：容器或图片有可计算尺寸、img设display: block、父容器加overflow: hidden；cover裁剪填满，contain等比留白。
object-fit写了但没反应，八成是容器没尺寸
浏览器根本没拿到“盒子有多大”这个信息，object-fit就只能干等着。它不是自动适配开关，而是“在已知宽高的框里怎么摆图”的指令——框都没定下来，自然不生效。
常见现象：img加了object-fit: cover，但图片还是原样撑开、拉伸或留大片空白；开发者反复检查拼写、浏览器兼容性，其实问题不在属性本身。
- 父容器是
float或display: contents，导致高度塌陷 -
img只设了width: 100%，height仍是auto，高度由图源决定 - 用
img-fluid（Bootstrap）这类类名，内部含height: auto，直接和cover冲突 - Flex/Grid 容器中，子项没设
height: 100%或min-height，容器高度为0
移动端特别容易翻车的三个写法
移动设备渲染更敏感，某些看似无害的组合会直接让object-fit静默失效。
- 混用
max-width: 100%和width: 100%：Safari 旧版本会触发尺寸重算异常，contain表现不稳定 -
img是行内元素，默认有vertical-align: baseline，底部多出几像素空白，干扰高度计算 - SSR 首屏未加载完时，容器 DOM 尺寸未就绪，
object-fit暂时无效（尤其在 hydration 前）
必须同时满足的三个硬条件
object-fit: cover或contain要可靠工作，这三点一个都不能少：
- 容器或
img自身有可计算的宽高（比如width: 100%; height: 200px，或width: 100%; aspect-ratio: 16 / 9） -
img设display: block，消除行内默认间隙 - 父容器加
overflow: hidden，否则裁剪部分可能溢出
cover 和 contain 别选错，语义不同
这不是风格偏好，而是行为逻辑差异，选错会导致视觉结果完全偏离预期：
-
object-fit: cover：等比缩放后填满容器，边缘被裁——适合封面、头像、卡片图；必须配合object-position微调裁剪区域（比如object-position: top保全脸部） -
object-fit: contain：等比缩放后完整显示，四周留白——适合证件照、产品细节图；此时object-position影响极小，但容器尺寸远大于图片时，图会显得极小，用户可能误判为加载失败 -
object-fit: fill就是默认拉伸行为，等于没加，别用
真正复杂的地方不在object-fit语法本身，而在于你是否意识到：一旦用了float、display: contents，或者 SSR 首屏还没 hydration 完，那个“盒子”就还不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
