object-fit写了没效果的根本原因是容器缺乏可计算的宽高基准，必须确保img或其父容器有明确尺寸（如width/height、aspect-ratio）、img设display: block且父容器overflow: hidden，三者缺一不可。
object-fit 为什么写了没效果？
根本原因不是属性写错了，而是浏览器压根没拿到“盒子尺寸”这个前提。object-fit 不是魔法，它只负责在已知宽高的框里决定图片怎么放——如果容器高度是 auto、父元素浮动塌陷、或 img 自身没设 width: 100%，那它就静默失效。
- 常见失效场景：
img只设了width: 100%，但height没约束，高度由原始图撑开 - Flex/Grid 容器中子项未设
height: 100%或min-height，导致容器高度为 0 - 用了 Bootstrap 的
img-fluid（含height: auto），和object-fit: cover直接冲突 -
img是行内元素，默认有vertical-align: baseline，底部多出几像素空白，干扰高度计算
怎么让容器真正“锁住尺寸”？
关键不是给 img 加样式，而是让浏览器能确定渲染空间。现代写法优先用 aspect-ratio，兼容性要求高时用 padding-bottom 技巧：
- 推荐（Chrome/Firefox/Safari 15.4+）：
img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }—— 自身维持比例，不依赖父容器高度 - 兼容写法（含 Safari 13.3–）：父容器设
position: relative; padding-bottom: 56.25%，img设position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; - 简单粗暴但有效：
img { width: 100%; height: 200px; object-fit: cover; }—— 固定像素高，适合卡片高度统一的场景
cover 和 contain 到底该选哪个？
这不是审美偏好，而是语义需求判断：
-
object-fit: cover：等比缩放后裁剪边缘，确保填满整个容器 —— 适合卡片图、轮播封面、头像框；但人脸/Logo 可能被切，必须配object-position微调 -
object-fit: contain：等比缩放后完整显示，留白补足容器 —— 适合证件照、产品细节图、图标；此时object-position影响极小 -
object-fit: fill：强制拉伸填满，破坏宽高比 —— 除非刻意做故障艺术，否则一律避免
容易被忽略的三个硬性条件
object-fit: cover 要可靠生效，这三点缺一不可：
- 容器或
img自身必须有可计算的宽高（如width: 100%; height: 100%，或width: 100%; aspect-ratio: 4 / 3） -
img最好设为display: block，避免行内默认间隙干扰高度 - 父容器需加
overflow: hidden，否则裁剪部分可能溢出
真正复杂的地方不在 object-fit 本身，而在于你是否意识到：一旦用了 float、display: contents 或 SSR 首屏未加载完成，那个“盒子”就可能瞬间坍塌——这时候再调 object-fit 参数，只是在修一个不存在的框。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
