用 background-size: contain 配合 height: 100vh 和 width: auto 可确保全屏背景图完整显示、不裁剪、不变形；cover 必然裁剪因其定义为等比缩放至至少一边填满容器，牺牲另一方向可见性。
用 background-size: contain 配合 height: 100vh 和 width: auto，才能确保全屏背景图完整显示、不裁剪、不变形——cover 本质就是为裁剪而设计的，别硬扛。
为什么 background-size: cover 一定会裁剪？
cover 的定义就是「等比缩放，直到图像的宽或高至少有一边填满容器」，这意味着它必须牺牲另一方向的可见性。常见错误是以为加了 background-position: center 就能“保住主体”，但实际裁剪位置取决于图像宽高比与视口宽高比的差值，无法预测哪边被切掉。
典型现象包括：人物脸部被截、LOGO 只剩一半、关键文字消失。这不是 bug，是 cover 的预期行为。
-
cover适合首屏大图、氛围感优先的场景，不适合含明确构图或信息的图 - 若图像原始宽高比接近 16:9（如多数横屏摄影图），在竖屏手机上裁剪尤其严重
- 即使加了
object-fit: contain到<img>标签，对background-image无效
contain + 100vh 是最稳的不裁剪方案
要整张图都看见，就得让浏览器尊重图像本征比例，同时锚定高度基准。关键不是“铺满”，而是“刚好够高、宽度自适应”。
-
height: 100vh强制元素撑满视口高度，这是可见性的前提 -
width: auto让浏览器按图像原始比例推算宽度，避免拉伸或压缩 -
background-size: contain确保图像完整缩放进该尺寸内，留白自动出现在左右或上下 -
background-position: center center把留白均分，防止图像偏左/偏上
示例代码：
body {
background-image: url('hero.jpg');
background-repeat: no-repeat;
background-position: center center;
height: 100vh;
width: auto;
background-size: contain;
margin: 0;
}
注意：margin: 0 必须写，否则 html 和 body 默认外边距会让实际高度小于 100vh。
平铺背景怎么适配不同分辨率？
平铺（repeat）本身响应式，但失效往往是因为容器没高度、路径错或样式被覆盖。
- 必须显式设
background-repeat: repeat—— 浏览器默认就是repeat，但一旦用了background简写却漏掉它，就会退回到no-repeat -
min-height: 100vh比height: 100vh更安全，避免内容超长时底部留白 - 小纹理图（如噪点、网格）直接用
background-size: auto；若需控制密度，改用background-size: 40px 40px - 大图慎用平铺——重复感强，建议改用
cover或分区域用不同纹理
媒体查询可微调密度，例如：
@media (max-width: 768px) {
body { background-size: 20px 20px; }
}
容易被忽略的兼容性细节
contain 和 cover 在 IE9+、Chrome 20+、Firefox 25+ 都支持，但有两点常被跳过：
-
html元素也要设margin: 0和height: 100%，否则某些旧版 Safari 下body的100vh不生效 - 移动端 Safari 对
100vh有视口缩放问题，可用100dvh替代（Chrome 100+/Safari 16.4+ 支持），但需降级 fallback - 图片路径以 CSS 文件位置为基准，不是 HTML 文件——外部 CSS 中写
url(img/bg.jpg)，实际找的是 CSS 所在目录下的img/
真正难的不是写对属性，而是验证每张图在 iPhone SE、iPad Pro、27寸 4K 屏上是否都按你预期的方式留白或对齐——留白位置、字体叠加区域、触控热区，都得实机测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
