概述 `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
微信公众账号
微信扫一扫加关注
发表评论 取消回复