cover填满容器但可能裁剪,contain完整显示但可能留白;二者均保持宽高比,需配合background-position: center和background-repeat: no-repeat使用。

要让背景图片自适应容器,关键在于正确使用 background-size 属性的 cover 和 contain 值。它们都保持图片宽高比,但缩放逻辑和裁剪行为完全不同。
cover:填满容器,可能裁剪
cover 会让背景图片等比缩放,直到图片的宽度 和 高度都 至少等于 容器的对应尺寸。这意味着图片一定能完全覆盖整个容器,但超出部分会被隐藏(即裁剪)。
- 适合用在强调视觉冲击、允许局部缺失的场景,比如全屏横幅、卡片封面
- 图片中心通常默认对齐(配合
background-position: center效果更稳) - 如果容器宽高比和图片不一致,一定会有一边被裁掉 —— 这是正常行为,不是 bug
contain:完整显示,可能留白
contain 会让背景图片等比缩放,直到图片的宽度 或 高度 恰好等于 容器的对应尺寸。此时整张图一定完整可见,但容器内可能出现空白区域(背景色露出)。
- 适合需要展示全部内容的场景,比如图标、示意图、证件照预览
- 默认对齐方式仍是居中,空白会均匀分布在上下或左右
- 若容器比图片大很多,图片会显得很小;可搭配
background-repeat或其他方案优化
别忘了搭配基础属性
单独设 background-size 往往不够,建议组合使用:
立即学习“前端免费学习笔记(深入)”;
-
background-image: url(...)—— 先指定图片 -
background-size: cover / contain—— 控制缩放方式 -
background-position: center—— 避免图片偏移,尤其 cover 下更关键 -
background-repeat: no-repeat—— 防止意外平铺(cover/contain 默认就是 no-repeat,但显式写上更清晰)
小技巧:响应式中动态切换
不同屏幕下对“是否允许裁剪”需求可能变化。可用媒体查询区分:
- 桌面端用
cover保证大气观感 - 移动端用
contain确保关键信息不被切掉(比如人脸、文字标识) - 也可用
background-size: 100% 100%强制拉伸(不推荐,会变形)作为备选










