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 无效
很多人试图给 现代浏览器都支持，但老版本 IE（如 IE9）不支持 立即学习“前端免费学习笔记（深入）”； 实际缩放效果取决于你到底要“视觉上变小”还是“资源上变轻”——前者调 width 和 height 来“缩小背景图”，但这是误解——背景图尺寸由 background-size 控制，元素宽高只决定显示区域大小。
background-size: 100% 100%; 仍会拉伸原图填满它background-size，例如：background-size: 50% auto;
auto 保留原图宽高比，配合百分比或像素值才可控background-size 支持的常用值类型和兼容性
cover/contain，需 fallback；移动端无兼容问题。
background-size: 100px; → 宽设为 100px，高按比例自动计算background-size: 100px 80px; → 强制宽高，可能变形background-size: 75% 75%; → 相对于容器宽高的百分比，推荐用于响应式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 像素，浏览器仍下载完整大图。
picture + srcset 替代纯 CSS 背景图background-image: url('bg.webp');，再 fallback 到 JPGbackground-size，后者必须换图或改加载方式。
