background-size常用取值包括cover（全盖裁剪）、contain（完整显示留白）、100% 100%（强制拉伸变形）、auto 200px（等比缩放定高）；响应式需配合媒体查询动态调整，并同步优化background-position与图片资源适配。
background-size 的常用取值和实际效果
设置背景图片大小的关键是 background-size，它直接决定图片如何适配容器。不是所有取值都适合响应式场景，比如 cover 会裁剪、contain 会留白，而 100% 100% 会强制拉伸变形。
-
cover：缩放图片使其完全覆盖容器，可能裁掉边缘——适合全屏 banner，但要注意关键内容别在图边缘 -
contain：缩放图片使其完整可见，容器内可能出现背景色空隙——适合 logo 或图标类背景 -
100% 100%：强制拉伸填满，宽高比丢失——慎用，尤其人像或文字图会明显失真 -
auto 200px：保持原始宽度比例，高度固定为 200px——适合卡片中统一高度的缩略图背景
响应式背景下 background-size 怎么配合媒体查询
单纯写死一个 background-size 值，在小屏上往往撑不开或糊成一片。必须搭配 @media 动态调整，否则图片在手机上要么太小、要么被过度裁剪。
- 大屏用
cover保证视觉冲击，小屏改用auto 80vh避免头部被切掉 - 如果背景图含重要文字，小屏建议切到
contain并加background-position: center top确保文字区域可见 - 注意：不要只改
background-size，background-position往往得同步调，否则“居中裁剪”变成“切掉一半脸”
background-size 在不同单位下的行为差异
用像素、百分比、视口单位时，浏览器计算逻辑完全不同。比如 500px 是绝对尺寸，50% 是相对于容器宽高的百分比，而 100vw 是整个视口宽度——三者在 flex 容器或 padding 影响下表现可能天差地别。
-
300px 200px：固定尺寸，容器变小后图片溢出或被截断 -
100% auto：宽度铺满，高度按原图比例缩放——适合横幅类背景，但需确保容器有明确高度 -
cover和contain是关键字，不依赖单位，但受background-origin和background-clip影响（默认是padding-box）
容易被忽略的兼容性和加载问题
background-size 在 IE9+ 支持良好，但 IE8 及更早版本完全不识别，会回退到默认平铺。另外，如果图片本身分辨率低，再怎么设 cover 也会模糊；而高分辨率图在低端设备上可能触发内存警告甚至卡顿。
立即学习“前端免费学习笔记（深入）”；
- 务必提供
background-image的多倍图方案，比如用image-set()或媒体查询配min-resolution - 避免在
:hover中突然切换background-size值，尤其是从auto切到cover，可能触发重绘抖动 - 如果用 CSS 动画过渡
background-size，记得加will-change: background-size提前提示渲染层，否则动画易掉帧
