object-fit不改变盒模型，仅控制替换元素内容在容器内的缩放与定位；必须配合父容器明确尺寸、img宽高设为100%、overflow:hidden及display:block才生效。
直接结论： object-fit 不调整盒模型本身，它只控制替换元素（如 <img>）的内容如何在已有盒模型内缩放和定位；真正决定“填满”效果的，是父容器尺寸 + img 自身宽高设置 + object-fit 取值三者协同作用。
为什么只写 object-fit: cover 没反应？
浏览器根本不知道“往多大盒子里填”，object-fit 就无法计算缩放比例或裁剪边界。常见失效链路如下：
- 父容器没设
width和height（或aspect-ratio），高度塌陷为auto -
<img>只写了width: 100%，但没配height: 100%或aspect-ratio - 父容器用了
display: inline、float未清除，或 flex/grid 子项未设min-height - 漏了
overflow: hidden→cover裁掉的部分会溢出显示，误以为“没裁”
object-fit: cover 和 object-fit: contain 的关键区别
这不是风格偏好，而是内容优先级判断：
Kibana Saved Objects
下载
通过 REST API 管理 Kibana 保存的对象（仪表板、Lens 可视化等）。适用于：① 以编程方式创建、更新、删除仪表板和 Lens 可视化。
-
cover：要求填满容器、无留白，允许裁切。默认居中裁剪，但人脸/Logo 可能被切掉 → 必须配合object-position调整落点（如object-position: center top） -
contain：要求整图可见，留白可接受。此时object-position几乎无效，因为图片完全在框内 -
fill（默认）：强制拉伸，破坏宽高比 → 除非做故障艺术，否则一律避免 -
scale-down：仅当图片原始尺寸 > 容器时，退化为contain；否则保持原尺寸
必须同步设置的配套 CSS 规则
单独加 object-fit 几乎总无效，以下四条常需共存：
-
img必须显式设width: 100%和height: 100%（不能只设一个） - 父容器需有明确尺寸约束：固定值、百分比、或
aspect-ratio（推荐用aspect-ratio: 16 / 9替代硬写 height） - 父容器加
overflow: hidden，否则cover裁切部分会溢出 -
img建议加display: block，避免行内元素默认 baseline 留白
IE11 和旧 Edge 的降级处理要点
@supports (object-fit: cover) 在部分旧 Edge 中会误判为支持，纯 CSS hack 不可靠：
- JS 检测更稳：
'objectFit' in document.documentElement.style - 降级优先用
background-image：给容器设背景图，原<img>设visibility: hidden（保留alt语义和可访问性） - 避免用
display: none隐藏原图，否则屏幕阅读器读不到alt文本 - 若用 JS 动态加载 fallback 图，确保在
IntersectionObserver回调触发后才设置src，而非初始赋值
最易被忽略的一点：裁剪位置不是由 object-fit 决定的，而是由 object-position 控制——哪怕你只用 cover，如果没调 object-position，默认就是 50% 50%，关键内容仍可能被切掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
