object-fit失效的根本原因是容器缺乏可计算宽高，必须确保父容器有明确尺寸（如w-full、h-full或aspect-ratio）、img设display: block且父容器overflow: hidden，三者缺一不可。
根本原因不是 object-fit 写错了，而是浏览器压根没“盒子”可适配——它只管怎么填，不管盒子在哪。没明确宽高或比例，属性就静默失效。
容器没设可计算尺寸（最常见）
只给 img 加 object-fit: cover，但父容器没宽高、没 aspect-ratio、也没用 padding-bottom 锚定高度，图片就会按原始尺寸撑开容器，object-fit 完全不触发。
- 检查 computed 样式：如果
img的实际渲染高度是auto或远大于预期，说明容器塌陷了 - Tailwind 用户注意：
aspect-video必须加在**容器元素**上，不是img标签本身；给img加等于白写 - Flex 容器中尤其危险：若父级设了
height: 300px，但子img只写了width: 100%没写height，它可能被align-items: stretch拉高变形
Flex 布局里图片被压缩或拉伸
替换元素（如 img）默认有 min-width: auto 和 flex-shrink: 1，在 Flex 主轴方向会被强制缩窄或拉长，导致 object-fit 失去裁剪基准。
- 现象：图片缩成一条细线、加载后闪动、或横向被压扁
- 必须在
img或其**直接父容器**上加min-w-0（即min-width: 0） - 同时加
flex-shrink: 0或更稳妥的flex: 0 0 auto；Tailwind 没内置后者，得手动加style="flex: 0 0 auto" - 别混用
max-w-100和w-full：Safari 旧版本会因此触发尺寸重算异常
移动端和旧环境兼容性陷阱
iOS Safari 13.3 及更早版本、IE 全系、部分安卓 WebView 完全不识别 object-fit，加了前缀也无效，会退化为 fill（即拉伸）行为。
Kibana Saved Objects
下载
通过 REST API 管理 Kibana 保存的对象（仪表板、Lens 可视化等）。适用于：① 以编程方式创建、更新、删除仪表板和 Lens 可视化。
- iOS Safari 9.3 需要
-webkit-object-fit: contain，Autoprefixer 必须配safari >= 9才能加 - uni-app / 微信小程序：CSS 层面直接忽略
object-fit，必须改用<image mode="aspectFill"></image> - 降级方案不能只靠 CSS：IE 下得用
background-image+background-size: cover，但会丢失alt、SEO 和原生懒加载 - 真机测试别只看竖屏：横屏下容器宽高比突变，
contain可能让图缩成图标大小，得用@media (orientation: landscape)单独兜底
object-position 没配，关键内容被切掉
object-fit: cover 默认从图片中心裁剪，但人脸、Logo、文字标题往往不在正中心。不配 object-position，结果就是重要内容被切掉。
-
object-position语法同background-position，支持center top、20% 30%、left等值 - 调试技巧：临时加
border: 1px solid red到img上，看清裁剪边界与内容相对位置 - 别在
img上同时写width: 100%和height: 100%：这会强制拉伸，覆盖object-fit效果 - Bootstrap 卡片中失效主因是
img-fluid的height: auto与card-img-top无高度约束，得用h-64或aspect-ratio替代
最容易被跳过的三点：容器没锁比例、忘了配 object-position、在 Safari 13.3 以下环境直接写。这些地方一漏，object-fit 就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
