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