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 决定媒体内容如何填充容器（如 cover/contain），object-position 控制内容的对齐位置。

用法/示例

.thumb { width: 240px; height: 160px; object-fit: cover; object-position: center }
.avatar { width: 48px; height: 48px; object-fit: contain; object-position: 50% 0 }

工程建议

• 为容器提供明确尺寸以避免布局抖动；结合 aspect-ratio 构建稳定占位。
• 按内容主体选择对齐点，避免重要区域被裁剪；在懒加载与解码策略下验证体验。
• 测试不同格式与平台的像素插值与抗锯齿表现。

参考与验证

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