object-fit: cover 必须作用于 img 元素且需明确宽高或宽高比，写在 Grid 项上无效；父容器需有约束尺寸，overflow: hidden 应加在 grid-item 上；旧版 Safari 和小程序需降级处理。

不是 object-fit 失效，而是它根本没被“激活”——Grid 项没尺寸、img 没宽高、父容器没约束，三者缺一，裁剪就静默跳过。

为什么 object-fit: cover 写在 Grid 项上完全没反应

因为 object-fit 只对替换元素（、）生效，对普通

或 Grid 容器无效。很多人误写成：

.grid-item { object-fit: cover; }

浏览器直接忽略，不报错也不警告。

• ✅ 正确位置：.grid-item img { object-fit: cover; }
• ❌ 错误写法：.grid-item { object-fit: cover; } 或 .grid-item > * { object-fit: cover; }
• ⚠️ 别指望 width: 100% 自动“传导”高度——img 必须自身有可计算的渲染框

img 必须同时设 width 和 height 才触发 object-fit

object-fit 的行为依赖明确的宽高比或尺寸基准。只写 width: 100%、留 height: auto，浏览器仍按原始图撑开，cover 不介入。

• ✅ 推荐组合：width: 100%; height: 100%;（需父级高度可计算）
• ✅ 更健壮组合：width: 100%; aspect-ratio: 4 / 3; object-fit: cover;（现代浏览器）
• ❌ 避免：height: 100% 单独使用——若 Grid 行高是 auto 或未定义，计算结果为 0，object-fit 彻底失效
• ? 加 display: block 消除行内默认间隙，避免高度微小偏差

Grid 项本身没锁住比例，object-fit 就是摆设

Grid 分配空间，但不定义子项比例。如果 .grid-item 高度由内容撑开、用了 display: contents、或轨道是 minmax(auto, 1fr)，那 img 就没有稳定“盒子”可适配。

Kibana Saved Objects

通过 REST API 管理 Kibana 保存的对象（仪表板、Lens 可视化等）。适用于：① 以编程方式创建、更新、删除仪表板和 Lens 可视化。

下载

• ✅ 稳住尺寸的实操方式：
  – 给 .grid-item 设 aspect-ratio: 16 / 9（现代）
  – 兼容旧 Safari：用 padding-bottom: 56.25% + position: relative/absolute
  – 统一设 min-height: 200px（注意高 DPR 屏模糊风险）
• ⚠️ overflow: hidden 必须加在 .grid-item 上，不是 img 上——否则裁掉的部分会溢出到相邻格子
• ? 调试技巧：临时加 outline: 1px solid red 到 img，看清它真实占位是否符合预期

移动端和 Safari 13.3 以下的隐藏陷阱

iOS Safari 13.3 及更早版本压根不识别 object-fit 在 上的声明，加 -webkit-object-fit 也无效，直接退化为 fill（拉伸）行为。

• ✅ 降级方案：@supports (object-fit: cover) { ... } 包裹正常样式，不支持时 fallback 到 background-image + background-size: cover
• ⚠️ uni-app / 微信小程序环境：原生不支持 object-fit，必须用
• ? 横竖屏切换、键盘弹出时容器比例突变，cover 可能导致图片缩得极小——需配合 @media (orientation: landscape) 做兜底

真正难的从来不是写对 object-fit，而是意识到：只要 .grid-item 还在浮动、img 还没拿到确定尺寸、父容器还在塌陷，那个“裁剪框”就不存在。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！