CSS object-fit 与 object-position：媒体裁剪与填充策略

---

title: CSS object-fit 与 object-position：媒体裁剪与填充策略

keywords:

• object-fit
• object-position
• cover
• contain
• 裁剪与填充

description: 介绍 object-fit/object-position 在图片与视频上的应用，选择合适的裁剪/填充策略并精确对齐兴趣区域，提升画面与版式的一致性与可用性。

categories:

• 文章资讯
• 编程技术

---

概述

object-fit 控制替换元素（如 <img>/<video>）内容如何适应盒子尺寸（cover/contain/none/scale-down）；object-position 设置内容在盒子内的对齐位置，用于突出兴趣区域与避免关键内容被裁剪。

示例

.hero img { width: 100%; height: 480px; object-fit: cover; object-position: center }
.avatar { width: 64px; height: 64px; object-fit: cover; object-position: 50% 30% }

工程建议

• 策略选择：首屏横幅使用 cover；图库缩略图使用 cover 或 contain；避免关键内容被裁剪。
• 与占位：搭配 aspect-ratio 与固定尺寸，避免加载前后抖动（CLS）。
• 兼容与性能：测试不同格式与解码性能；在旧浏览器回退到背景图或裁剪管线。

参考与验证

• MDN object-fit 文档：https://developer.mozilla.org/docs/Web/CSS/object-fit
• MDN object-position 文档：https://developer.mozilla.org/docs/Web/CSS/object-position