CSS背景尺寸：cover与contain全面解析

CSS中的background-size属性通过cover和contain两种等比缩放策略，精准平衡背景图像的“填充感”与“完整性”：cover强制撑满容器但必然裁剪边缘，适合全屏视觉场景；contain确保图像完整可见却难免留白，适用于内容优先的图标或示意图；二者均杜绝变形失真，而误用100% 100%则会导致图片被强行拉伸扭曲；正确选择不仅关乎视觉效果，更直接影响关键信息（如logo、文字）是否可被用户看到——一个看似微小的取值差异，可能成为上线前视觉验收环节的致命盲点。

background-size: cover 会裁剪图片，但能填满容器

用 cover 时，浏览器会等比缩放图片，直到图片的宽和高**至少有一个**撑满容器对应方向。这意味着另一方向必然溢出——被裁掉。常见于全屏轮播图、登录页背景，你想要“无空隙覆盖”，就得接受边缘内容可能消失。

• 如果原图是 4:3，容器是 16:9，顶部/底部一定被切掉
• background-position 会影响哪部分被保留（默认居中，所以中间最安全）
• 响应式布局下，窗口缩放时裁剪区域会变，别把关键文字放在图边缘

background-size: contain 保证完整显示，但留白不可避免

contain 是等比缩放图片，直到**宽和高都完全在容器内**。结果就是：图片肯定完整，但大概率留黑边或白边。适合图标背景、卡片内嵌示意图这类“内容优先”的场景。

• 如果容器宽高比和图片不一致，必定有空隙；空隙位置由 background-position 决定（默认还是居中）
• 在 flex 或 grid 容器里用 contain，要小心父容器 padding 或 margin 挤压可用空间
• 别指望它“自动居左对齐”——想靠左就得显式写 background-position: left center

cover 和 contain 在 Retina 屏上表现一致，但图片源分辨率必须够

这两个值本身不处理像素密度，只管缩放逻辑。但实际效果是否清晰，取决于你提供的图片分辨率。比如一个 800×600 的图设为 cover 在 2x 屏上拉伸到 1600×1200，就会模糊。

• 用 background-image: url(img@2x.jpg) 配合媒体查询是稳妥做法
• CSS 中不能直接写 “2x” 后缀，得靠 @media (-webkit-min-device-pixel-ratio: 2) 切换
• SVG 作背景时天然适配，cover/contain 行为不变，且无模糊风险

不要用 background-size: 100% 100% 替代 cover

100% 100% 是强制拉伸，完全不保持宽高比——图片会变形。这是和 cover 最容易混淆的操作，错误现象通常是人物脸变胖、文字被压扁、图标扭曲。

• 调试时看到图片“被拉宽/压扁”，第一反应查是不是误写了 100% 100%
• 即使你确定容器比例固定，也别用它替代 cover：语义不清，后续维护者无法判断设计意图
• 真需要非等比拉伸？那得明确承认这是特殊需求，并加注释说明

cover 和 contain 的区别不在“好不好看”，而在“要不要牺牲完整性换填充感”。选错的后果不是报错，而是上线后设计师突然找你问：“为什么用户看不到 logo 全貌？”——这种问题往往卡在视觉验收环节，很难从代码里一眼看出。

今天关于《CSS背景尺寸：cover与contain全面解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！