background-size 与 object-fit
解释 background-size 和 object-fit 在背景图与内容图片中的不同职责，以及 cover 和 contain 的使用边界。
#type / concept
#status / growing
#resource / css
#tech / dev / frontend
[!info] related notes
- 所属 MOC: CSS MOC
- 上位主题: CSS 文本与视觉样式
- 相关问题: CSS 表单样式
background-size 与 object-fit
图片和背景图看起来都是“图像显示”，但在 CSS 里它们是两套不同语义。
一句话区分
background-size处理背景图怎么铺在盒子里object-fit处理图片或视频内容本身怎么放进盒子里
background-size
最常见的值：
covercontain
cover
尽量铺满容器，必要时裁剪。
适合：
- Banner
- 卡片封面
- Hero 背景
contain
尽量完整显示整张图，不裁剪，但可能留白。
适合：
- 需要完整看到图像内容
- Logo 类背景
object-fit
常用于：
<img><video>
最常见写法：
img {
width: 100%;
height: 100%;
object-fit: cover;
}为什么这两个概念总容易混
因为它们都在回答“图怎么塞进盒子里”，但前提不同：
- 背景图是装饰层
- 图片元素是内容本体
最短记忆方式
背景图看 background-size，内容图片看 object-fit；cover 倾向铺满，contain 倾向完整。