CSS background 属性中 cover 的正确用法是什么？cover 与 contain 有何区别

在网页开发中，给元素设置一张全屏背景图几乎是每个项目都会遇到的需求。想让背景图铺满整个容器且不变形，background-size: cover 无疑是首选方案。但 cover 到底是怎么缩放图片的，为什么有时候图片会被裁掉一大块，它和 contain 又有什么本质区别，这些问题如果不弄清楚，就很容易写出看似正常、实际上在不同屏幕比例下显示效果很差的样式。本文将围绕 cover 的底层缩放逻辑、与 contain 的对比、以及实际项目中的配合技巧来展开讲解。

一、cover 的工作原理：浏览器是如何计算缩放比例的

要理解 cover，首先要明白它的定义：将背景图像等比缩放至完全覆盖容器的最小尺寸。注意两个关键词，一是等比缩放，图片的宽高比始终保持不变，因此不会出现拉伸变形；二是完全覆盖，也就是图片必须把容器的每一个角落都填满，不留任何透明空隙。

浏览器具体是这样计算的：假设图片原始尺寸为 w × h，容器尺寸为 W × H。图片需要分别按宽度比例 W/w 和高度比例 H/h 缩放，cover 会取这两个比例中的较大值作为最终缩放比例。这样保证图片在宽、高两个方向上都不小于容器，从而实现完全覆盖。而多出来的部分则会被容器边界裁剪掉。

举个例子，一张 1920 × 1080 的图片，容器是 800 × 600。宽度比例为 800/1920 ≈ 0.417，高度比例为 600/1080 ≈ 0.556，取较大值 0.556，最终图片被缩放为约 1067 × 600。可以看到图片宽度超出了容器 267px，这部分就会默认从左右两侧被裁掉。这也解释了为什么使用 cover 时图片总有一部分内容显示不出来，尤其是当图片宽高比与容器宽高比差异较大的时候，裁剪会非常明显。

基础用法示例如下：

.hero {
  background-image: url('hero.jpg');
  background-size: cover;      /* 等比缩放并完全覆盖容器 */
  background-repeat: no-repeat;/* 禁止平铺，cover 下通常无需平铺 */
  background-position: center; /* 控制裁剪时保留图片中心区域 */
}

上面的代码中，background-position: center 是一个非常关键的配合项，下一节会详细说明它的作用。

二、cover 与 contain 的核心区别

contain 和 cover 只差一个字母，行为却是镜像的。contain 的规则是等比缩放至能完整放进容器的最大尺寸，也就是说浏览器会取宽度比例和高度比例中的较小值。结果就是图片完整显示、一个像素都不裁剪，但容器可能会留出空白区域。

用一张对比表来直观展示两者的差异：

两者的选择标准其实很简单：如果你的设计优先级是填满容器，允许牺牲图片边缘内容，就用 cover；如果优先级是看全图片，允许容器留白，就用 contain。全屏网页背景、卡片头图这类视觉冲击场景几乎都选 cover；而商品缩略图、公司 Logo 这类必须完整呈现的场景则应该用 contain。

还需要提醒一点，有些开发者图省事直接写 background-size: 100% 100%，这会让图片分别按宽、高拉伸到容器大小，一旦图片宽高比和容器不一致就会明显变形，这是绝对不推荐的做法。等比缩放正是 cover 和 contain 存在的意义。

三、background-position 与 cover 的黄金搭配

前面提到，cover 不可避免会裁掉图片的一部分，那具体裁掉哪一部分，就由 background-position 决定。默认值是 0% 0%，即图片左上角对齐容器左上角，超出部分全部裁在右侧和底部。这在大多数情况下并不是理想效果，比如一张人像照片，人物在图片中偏下，用默认裁剪可能把头裁掉一半。

设置为 center center（简写 center）后，图片中心与容器中心对齐，超出部分均匀裁剪在两侧，通常能保留图片的主体内容，这是 cover 最常用的搭配。此外还可以根据图片构图灵活指定，比如 center top 保留图片顶部，适合人物站在画面下方的照片；center bottom 保留底部，适合天空占比大的风景图。

/* 保留图片顶部：适合人物在下方的人像图 */
.banner-top {
  background-image: url('photo.jpg');
  background-size: cover;
  background-position: center top;
}

/* 保留图片中心：最通用的方案 */
.banner-center {
  background-image: url('photo.jpg');
  background-size: cover;
  background-position: center;
}

对于移动端竖屏适配，还有一种进阶技巧是配合媒体查询，在不同屏幕比例下切换 background-position，确保关键内容始终可见。例如手机竖屏时改为 center top，桌面宽屏时用 center，这样无论设备比例如何变化，图片的视觉主体都不会被裁掉。

四、实际项目中的常见坑与最佳实践

第一个常见的坑是背景图模糊。如果图片原始分辨率低于容器尺寸，cover 放大图片后就会出现明显的颗粒感。经验法则是背景图至少提供容器最大尺寸两倍左右的分辨率，例如目标容器最大 1920px 宽，图片就准备 1920px 以上（高分屏则更高）。也可以利用 image-set 或媒体查询为高分屏提供更高清的图片。

第二个坑是忘记设置 no-repeat。虽然 cover 模式下图片必然覆盖容器、平铺通常不可见，但在图片加载失败或容器极端比例下，残留的平铺行为可能产生奇怪的效果，显式声明 background-repeat: no-repeat 是更稳妥的写法。

第三个坑是移动端 100vh 问题。全屏背景常用 height: 100vh，但在移动浏览器上地址栏收起会导致视口高度跳变，背景随之抖动。可以改用 min-height: 100svh（小视口单位）来规避，兼容性写法如下：

.fullscreen-hero {
  min-height: 100vh;  /* 兜底 */
  min-height: 100svh; /* 支持 svh 的浏览器使用更稳定的视口高度 */
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

最后推荐一个简洁的综合写法，使用 background 简写属性一步到位，代码更整洁且加载性能略有优势：

.hero {
  background: url('hero.jpg') center center / cover no-repeat;
}

注意简写中 center center / cover 里斜杠的写法，斜杠前面是 position，后面是 size，这是 CSS 规范规定的格式，写错顺序会导致整条声明失效。

总结一下，cover 的正确使用姿势可以归纳为三点：理解它按较大比例等比缩放并裁剪超出部分的原理；用 background-position 控制裁剪区域以保住图片主体；结合高分辨率图片和稳定的高度单位应对响应式场景。掌握这些，背景图适配就不再是碰运气的事了。

CSS backgroundbackground-size cover背景图片适配修改时间：2026-09-02 12:12:53