object-fit 是什么，为什么不能用 background-image 替代
它控制的是 <img alt="CSS如何设置图片在盒子中的填充方式_通过object-fit调整盒模型表现" > 或 <video></video> 这类替换元素（replaced element）在容器内如何缩放和裁剪，不是背景图的填充逻辑。background-image 的 background-size 看似功能重叠，但语义和渲染行为完全不同：前者影响内容流、支持宽高比保持、能响应父容器尺寸变化；后者只是装饰层，不参与文档流，也不触发 img 的加载/错误事件。
常见错误现象：<img alt="CSS如何设置图片在盒子中的填充方式_通过object-fit调整盒模型表现" > 拉伸变形、上下留白、被父容器裁掉一半却没反应——本质是默认 object-fit: fill 强行拉满，而你其实想要等比缩放。
四个常用值的实际效果与选择依据
每个值对应不同场景，选错会直接导致视觉断裂或信息丢失：
-
object-fit: contain：等比缩放，完整显示全部内容，可能留白。适合头像、图标、需要看清全貌的卡片图 -
object-fit: cover：等比缩放并填满容器，自动裁剪溢出部分。适合封面图、轮播图、强调构图的场景 -
object-fit: fill：强制拉伸填满，无视原始宽高比。慎用，仅限 UI 装饰性切片图 -
object-fit: scale-down：取none和contain中更小的尺寸，防止放大模糊图。适合不确定源图质量的用户上传预览
注意：IE 完全不支持 object-fit，如需兼容，得用 background-image + padding-top 做 aspect-ratio 保底，或加 polyfill。
立即学习“前端免费学习笔记（深入）”；
必须搭配的 CSS 才能生效
object-fit 单独写没用，它只对「有明确尺寸约束」的替换元素起作用。典型遗漏点：
- 父容器没设
width/height，或者只设了max-width—— 此时<img alt="CSS如何设置图片在盒子中的填充方式_通过object-fit调整盒模型表现" >按原始尺寸渲染，object-fit不触发 - 图片本身没设
width: 100%或height: 100%，它不会自动撑满父容器 - 用了
display: block却忘了清除<img alt="CSS如何设置图片在盒子中的填充方式_通过object-fit调整盒模型表现" >默认的vertical-align: baseline，导致底部多出几像素空白
最小可用组合示例：
img { width: 100%; height: 200px; object-fit: cover; }
和 object-position 配合微调裁剪区域
当用 cover 或 scale-down 时，图片会被裁剪，object-position 决定裁哪一块。默认是 50% 50%（居中），但人脸常在画面下三分之一处，直接居中可能切掉头顶。
- 想让焦点偏上：用
object-position: center top或50% 20% - 适配横竖屏切换：可配合媒体查询动态改值，比如竖屏用
center 30%，横屏切回center - 注意：它不改变图片尺寸，只移动“视窗”位置，类似 Photoshop 里的移动图层
容易被忽略的一点：如果图片 src 加载失败，object-fit 和 object-position 全部失效，浏览器只显示 alt 文本或空白占位，此时样式完全不可控。
