object-fit 是 CSS3 控制 img/video 在容器内缩放裁剪的属性，解决图片变形、留白、比例失真等问题；需配合宽高或 aspect-ratio 使用，cover/contain 最常用，兼容性需降级处理。
object-fit 是什么，它能解决什么问题
object-fit 是 CSS3 新增的属性，专门用于控制 <img> 或 <video> 这类替换元素（replaced element）在其容器内如何缩放和裁剪。它不改变容器尺寸，也不影响布局流，只管“内容怎么塞进去”。常见需求如：头像统一成圆形、Banner 图铺满但不拉伸变形、卡片图保持比例居中显示——这些都靠 object-fit 配合 object-position 控制。
五个取值的实际效果与适用场景
每个值的行为差异直接影响视觉结果，选错会导致图片被意外裁剪或留白过多：
-
fill：强行拉伸填满容器，**忽略原始宽高比**，容易变形。仅适合对比例无要求的背景图替代方案 -
contain：等比缩放，确保全部内容可见。适合需要完整展示图片（如产品图、证件照预览） -
cover：等比缩放并**填满容器**，超出部分裁剪。最常用，适合 Banner、封面图、头像卡片 -
none：不缩放，按原尺寸渲染，超出部分隐藏（需配合overflow: hidden才看得出效果） -
scale-down：在none和contain中取更小尺寸的那个，适合不确定图片大小时的保守策略
注意：cover 和 contain 是高频选择，但默认裁剪/对齐位置是居中；若想偏移焦点（比如让人脸始终在左上），得搭配 object-position: 20% 30% 使用。
必须设置 width/height 才生效
object-fit 不会自动让图片撑开父容器。如果父容器本身没有明确尺寸（比如 height: auto 或未设 height），图片仍按原始大小渲染，object-fit 看似“没用”。
立即学习“前端免费学习笔记（深入）”；
.card-img {
width: 100%;
height: 200px; /* 必须有具体 height */
object-fit: cover;
}常见错误写法：
.bad-example {
width: 100%;
/* 缺少 height，或写成 height: auto */
object-fit: cover; /* 此时无效 */
}响应式场景下建议用 aspect-ratio 替代固定 height，兼容性稍弱但更灵活：
.responsive-img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}浏览器兼容性与降级处理
现代浏览器基本都支持，但 IE 完全不支持，Android 4.4 及更早版本也缺失。若项目需兼容老环境，不能只依赖 object-fit：
- 服务端提前生成多尺寸图 +
srcset+sizes是更稳妥的响应式方案 - 纯前端降级可用 background-image 模拟：
background-size: cover+background-position，但会失去<img>的语义和 SEO 优势 - JS 方案如
object-fit-images库可打补丁，但增加资源加载负担
真正关键的不是“能不能用”，而是“用了之后用户看到的是不是你预期的那张图”——尤其在 cover 下，不同屏幕宽高比可能导致关键区域被裁掉，上线前务必在真机多种尺寸下验证。
