background-size: cover可保持背景图比例不变并铺满容器，但可能裁剪边缘；需配合background-position: center及清零默认样式，小屏建议用contain兜底。

用 background-size: cover 就能保持背景图比例不变，同时铺满容器。

核心是 background-size: cover

这个值会让图片按原始宽高比缩放，直到完全覆盖容器区域。不会拉伸、不会压扁，但可能裁剪边缘部分。

• 适合全屏大图、视觉主导型页面
• 必须配合 background-position: center，避免关键内容被裁掉
• 如果容器尺寸变化频繁（比如响应式布局），cover 依然能稳定保持比例

别用 background-size: 100% 100%

这个写法会强制把图片拉伸到容器的宽和高，不管原图比例如何——结果就是变形、失真，尤其人像或文字类背景图一眼就能看出来。

• 仅适合纯色渐变、抽象纹理等对比例不敏感的图
• 在移动端横竖屏切换时容易出现明显畸变

基础样式要配齐

只写 cover 不够，还得确保容器有明确尺寸，且默认边距清零：

立即学习“前端免费学习笔记（深入）”；

• html, body { height: 100%; margin: 0; } —— 防止 body 高度塌陷
• background-repeat: no-repeat —— 避免平铺干扰
• background-position: center —— 让构图居中，裁剪更可控

小屏设备可加兜底方案

超小屏幕（比如手机竖屏）下，cover 可能裁掉太多。可用媒体查询切换成 contain：

• @media (max-width: 480px) { background-size: contain; }
• contain 会完整显示整张图，留白也比变形好
• 搭配 background-position: top center，让重点内容优先可见