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%强制拉伸（不推荐，会变形）作为备选
