概述 `object-fit` 控制替换元素（如 `/`）内容如何适应盒子尺寸（`cover/contain/none/scale-down`）；`object-position` 设置内容在盒子内的对齐位置，用于突出兴趣区域与避免关键内容被裁剪。 示例 ```css .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
微信公众账号
微信扫一扫加关注
发表评论 取消回复