object-fit用于控制或等内容如何适应容器，配合object-position可精准裁剪定位；常用值：cover（等比填满裁剪）、contain（等比完整显示）、fill（拉伸变形）；仅对替换元素生效，需容器有明确宽高。
object-fit 用于控制 <img> 或 <video></video> 等替换元素的内容如何适应其容器尺寸，特别适合响应式图片在不同宽高比下的裁剪与填充。它不改变图片原始尺寸，只调整显示方式，配合 object-position 还能精细控制裁剪区域。
常用 object-fit 值及适用场景
核心取值有 5 个，最常用的是以下三个：
- cover：等比缩放并填满容器，超出部分裁剪 —— 适合封面图、轮播图等强调视觉饱满的场景；
- contain：等比缩放并完整显示全部内容，留白处为透明或背景色 —— 适合产品图、图标、需要保留完整信息的图片；
- fill：拉伸填充容器（不保持宽高比）—— 少用，易导致图片变形，仅限特殊设计需求。
配合 object-position 精准控制裁剪焦点
当使用 cover 时，图片默认以中心对齐裁剪。若想突出人物脸部、logo 或某部分内容，可用 object-position 调整“视窗”位置：
- 语法类似
background-position，支持像素、百分比、关键词（如top left、50% 20%）； - 例如：
object-position: center top;让图片顶部对齐容器顶部，常用于人像图避免裁掉头部； - 搭配媒体查询可实现断点差异化定位，比如小屏上更靠上，大屏居中。
响应式布局中的实用写法
要让图片真正响应式且安全裁剪，需注意容器约束和 fallback：
- 给图片父容器设置明确宽高（如
aspect-ratio: 16 / 9;或height: 0; padding-bottom: 56.25%;），避免因图片加载延迟导致布局跳动； - 图片本身设
width: 100%; height: 100%;，再加object-fit: cover;； - 为兼容旧浏览器（如 IE），可添加
img的 background-image 替代方案，或用 JS 检测后动态降级。
常见误区提醒
容易忽略但影响效果的关键点：
-
object-fit对普通<div> 无效，只作用于替换元素（<code><img>、<video></video>、<object></object>）； - 若图片父容器未设高度，
height: 100%可能失效 —— 务必确保容器有可计算的高度来源； - 使用
cover时，原图分辨率要足够高，否则裁剪放大后可能模糊。
