对象适配属性

最后更新：2026-09-13

object-fit 对象适配属性

object-fit 用于控制替换元素（如 <img>、<video>）的内容如何适应其设定的宽高尺寸。当元素的宽高比例与内容不一致时，object-fit 可以决定是拉伸填充、保持比例裁剪还是完整显示，是响应式图片布局中不可或缺的工具。

分类
初始值	fill
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

object-fit: fill | contain | cover | none | scale-down;

⚙️ 取值

值	类型	描述
`fill \| contain \| cover \| none \| scale-down`	关键字	替换元素内容适配方式

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
object-fit	✓ v30	✓ v12	✓ v36	✓ v9	✓ v16
所有主流浏览器均支持

提示： cover 是最常用的值，会保持图片比例并填满容器，超出部分被裁剪，适合做正方形缩略图。

提示： object-fit 需要显式设置元素的宽高才能生效；单独使用 width 或 height 无法触发适配行为。

❓ 常见问题

Qobject-fit 和 background-size 有什么区别？

Aobject-fit 作用于 img、video 等替换元素，控制内容如何适配元素盒子，图片保留在文档流中，可被 SEO、alt 和爬虫识别；background-size 作用于背景图，适合纯装饰。内容图片用 img + object-fit，装饰图片用 background + background-size。

Qscale-down 和 contain 有什么不同？

Acontain 会按比例缩放图片以完整放入容器，图片小于容器时会被放大填满（比例保持）；scale-down 取 none（原始尺寸）和 contain 中显示更小的那个，即小图不会被放大。所以小图场景用 scale-down 避免模糊，大图场景两者通常结果一致。

Qobject-fit: cover 为什么会裁掉图片？怎么保留关键内容？

Acover 保持比例并铺满容器，宽高比不一致时必然裁掉多余部分，默认保留中心区域。要保住关键内容（人脸、logo），用 object-position 调整裁剪焦点，例如 object-position: top 保留顶部。也可以用 aspect-ratio 让容器比例与图片一致，避免裁剪。

Qobject-fit 不生效是什么原因？

A最常见的是元素没有确定的宽度和高度：只设置一个方向、另一个方向为 auto 时，替换元素会按内容自身比例缩放，object-fit 没有适配空间。另外要确认是替换元素（<img>、<video>、<iframe>、<embed>），普通 div 上的内容不受 object-fit 控制。检查这两点基本能解决。