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

概述`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-fitMDN `object-position` 文档：https://developer.mozilla.org/docs/Web/CSS/object-position