cover等比缩放填满容器但可能裁剪，contain等比缩放完整显示但可能留白；真正缩小需用具体值如50%或200px；background-size不减少图片体积，优化需压缩原图或使用srcset。
background-size: cover 和 contain 的区别在哪
用 background-size 控制背景图尺寸时，cover 和 contain 行为完全不同，选错会导致图片被裁剪或留白，不是“缩小”而是“适配逻辑错误”。
-
cover：等比缩放图片，填满整个容器，**可能裁掉上下或左右部分** -
contain：等比缩放图片，完整显示整张图，**可能在容器内留白** - 真正“缩小”常用的是具体数值，比如
background-size: 80%;或background-size: 200px 150px;
直接设 width/height 对 background-image 无效
很多人试图给 <div> 加 <code>width 和 height 来“缩小背景图”，但这是误解——背景图尺寸由 background-size 控制，元素宽高只决定显示区域大小。
- 元素本身尺寸小，但
background-size: 100% 100%;仍会拉伸原图填满它 - 若想让背景图变小，必须显式设置
background-size，例如：background-size: 50% auto; -
auto保留原图宽高比，配合百分比或像素值才可控
background-size 支持的常用值类型和兼容性
现代浏览器都支持，但老版本 IE（如 IE9）不支持 cover/contain，需 fallback；移动端无兼容问题。
-
background-size: 100px;→ 宽设为 100px，高按比例自动计算 -
background-size: 100px 80px;→ 强制宽高，可能变形 -
background-size: 75% 75%;→ 相对于容器宽高的百分比，推荐用于响应式 - IE9 及以下只能用具体像素值，且不支持双值写法，得降级为
background-size: 100px;
div {
background-image: url('bg.jpg');
background-size: 60% auto; /* 比容器窄，等比缩放 */
background-repeat: no-repeat;
background-position: center;
}图片太大导致加载慢？光调 background-size 不够
background-size 只影响渲染尺寸，不减少 HTTP 请求体积。原图 5MB，即使缩成 50×50 像素，浏览器仍下载完整大图。
立即学习“前端免费学习笔记（深入）”；
- 真正优化要从源头入手：用工具压缩图片（如 ImageOptim、Squoosh）
- 响应式场景下，用
picture+srcset替代纯 CSS 背景图 - 若必须用 CSS 背景，至少提供 WebP 格式并加
background-image: url('bg.webp');，再 fallback 到 JPG
实际缩放效果取决于你到底要“视觉上变小”还是“资源上变轻”——前者调 background-size，后者必须换图或改加载方式。
