在网页开发中，使用CSS为容器设置背景图片是非常常见的需求。当容器的宽高比例与图片原始比例不一致时，直接设定背景往往会出现图片拉伸变形、重复平铺或者显示不全的问题。CSS提供的background-size属性正是用来控制背景图像在容器中缩放与铺放行为的核心手段，其中cover与contain是两个最常用也最容易混淆的取值。理解它们背后的缩放算法，是写出稳定背景布局的前提。
background-size基础与取值机制
background-size属性可以接收多种类型的值，包括关键字、长度值和百分比。关键字主要有两个：cover和contain，此外还有默认的auto。当使用长度值如200px 100px时，背景图会被强制拉伸或压缩到指定尺寸，这通常会破坏图片原始比例。百分比则是相对于背景定位区域（默认为padding box）来计算，例如background-size: 100% 100%会让图片不按比例填满容器，极易变形。
cover与contain的共同点是都保持图片的固有宽高比进行等比缩放，不会让图像扭曲。不同点在于缩放的终止条件：cover以“覆盖”为优先，contain以“容纳”为优先。浏览器在解析这两个值时，会分别计算宽度方向和高度方向所需的缩放比例，再根据关键字选取其中一个比例执行。这种机制意味着二者在容器比例极端时表现差异巨大，开发者必须结合设计意图选择。
为了直观看到差异，下面是一段基础CSS示例，分别用两个类来演示同一张图在不同容器下的表现：
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-position: center;
}
.cover-demo {
background-size: cover;
}
.contain-demo {
background-size: contain;
}
cover的工作原理与适用场景
cover的取值逻辑是：分别计算让背景图宽度等于容器宽度所需的缩放比，以及让高度等于容器高度所需的缩放比，然后取其中较大的那个比例进行缩放。这样做的结果是，缩放后的图片在至少一个维度上刚好撑满容器，而另一个维度会超出容器范围，超出的部分被裁切掉（溢出隐藏）。例如一个400x300的容器放入一张800x200的宽图，cover会按高度比放大，使图高变为300，宽度变为1200，左右被裁。
cover非常适合需要营造沉浸感、全屏视觉的场合，比如首页大图轮播、卡片背景遮罩等。在这些场景中，设计师通常希望背景永远不留白，即便损失一些边缘内容也无所谓。配合background-position: center可以控制裁切重心，比如人物照片可设为center top避免头部被切。下面的代码展示了如何在一个全屏区块中使用cover：
.hero {
width: 100vw;
height: 100vh;
background-image: url('hero.png');
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
不过cover的缺点也很明显：当容器比例和图片比例差距过大，重要信息可能落在裁切区。比如在窄长手机屏上用cover放一张横幅图表，图表两端数据就会消失。此时如果业务要求完整展示，就不能用cover。另外在响应式布局中，容器尺寸变化会导致裁切区域动态偏移，建议用media query在不同断点微调position。
contain的工作原理与适用场景
contain的取值逻辑恰好相反：取宽度比和高度比中较小的那个比例缩放，保证缩放后的图片宽和高都不超过容器，因此整张图必然完整出现在容器内，但容器可能在水平或垂直方向留下空白（背景色或父级底色显露）。继续用400x300容器和800x200图举例，contain会按宽度比缩小，使图宽变为400，高度变为100，上下留白200。
contain常用于logo展示、产品图预览、需要保证信息完整的插画背景等。例如电商网站的分类侧边栏用图标做背景，就必须用contain确保图标不被切。结合background-color设定留白区颜色，能避免视觉突兀。以下示例演示了contain配合底色使用的写法：
.icon-box {
width: 120px;
height: 120px;
background-color: #f5f5f5;
background-image: url('icon.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
contain的局限在于无法形成“满底”效果，如果设计稿要求背景图充满且不变形，contain就达不到。有些开发者试图用contain加拉伸层叠背景来模拟，但那会增加复杂度。在多数内容型页面中，contain更适合作为辅助图形的保守方案。理解这两者后，还可以用background-size: auto 100%等半约束写法在单一维度适配，但cover与contain仍是最直观的抽象。
实践中的组合技巧与常见误区
实际项目里，单纯写cover或contain往往不够。一个典型误区是以为写了background-size: cover图片就一定会“好看”，结果在超宽屏上人物被放得过大。此时应搭配background-position并用calc或百分比定位焦点。另一个误区是在可滚动容器上使用background-attachment: fixed加cover，移动端会导致严重性能问题和错位，应改为局部固定或不用fixed。
还可以用多重背景叠加：第一层用contain放完整logo，第二层用cover放模糊大图，既保证商标清晰又兼顾氛围。语法上多个background用逗号分隔，对应size也逗号分隔。示例如下：
.mixed {
background-image: url('logo.png'), url('blur.jpg');
background-size: contain, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
}
最后要注意，background-size在IE9以下不支持，如果还要兼容古董浏览器，只能用img标签加object-fit（object-fit本身也有cover/contain概念）模拟。现代开发可放心使用，但仍建议在组件库中封装一个背景工具类，把cover/contain与position策略固化，减少团队协作时的随意书写。只有这样，背景图片自适应容器才能真正做到可控、可维护。
cssbackground-sizecover_contain修改时间：2026-08-19 03:02:33