CSS object-fit 与 object-position：媒体裁剪与定位

## 概述 `object-fit` 决定媒体内容如何填充容器（如 `cover`/`contain`），`object-position` 控制内容的对齐位置。 ## 用法/示例 ```css .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