CSS实现响应式背景图时出现高度收缩、裁剪问题如何解决？

问题核心成因：

• 初始出现底部白边是因为body默认高度由内部内容撑开，内容高度不足时背景无法铺满整个视口，同时浏览器默认给body加的8px外边距也可能额外产生白边
• 加height:100vh后出现裁剪，是因为background-size:cover的规则是等比缩放图片直到完全覆盖容器，窄屏容器宽度小于图片等比高度对应的宽度时，会自动裁剪横向超出的部分

不需要使用媒体查询的解决方案有三种，可根据业务需求选择：

方案1：可接受同色兜底，优先保证背景图完整不裁剪 #

用background-size: contain让图片完整等比缩放显示，同时添加和图片边缘主色调一致的背景色填充空白区域，你所用的山景图底部为深暗色，匹配对应背景色后几乎看不出拼接痕迹，同时把固定高度height:100vh改为min-height:100vh，避免内容超过视口高度时再次出现底部白边。
示例代码：

/* 先清除默认边距，避免浏览器默认样式产生白边 */
* {
  margin: 0;
  padding: 0;
}
body {
  min-height: 100vh;
  background: url(../Images/mountain.jpg) #121212 no-repeat center top;
  background-size: contain;
}

方案2：可接受非核心区域裁剪，优先保证背景铺满无空白 #

保留background-size:cover的铺满规则，通过调整background-position偏移量，把图片核心展示区域（比如山的主体）固定在可视范围内，裁剪掉不重要的边缘区域（比如顶部多余的天空、底部暗部）。
示例代码：

* {
  margin: 0;
  padding: 0;
}
body {
  min-height: 100vh;
  background: url(../Images/mountain.jpg) no-repeat;
  background-size: cover;
  /* 数值可根据你的图片内容调整，第二个值越小，整体图片越靠上显示 */
  background-position: 50% 20%;
}

方案3：完全不接受裁剪也不接受颜色填充，改用img标签做背景层 #

将背景图从CSS background改为单独的img标签固定在底层，通过object-fit规则控制缩放逻辑，比CSS背景图的适配灵活度更高。
示例代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.bg-img {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  min-height: 100vh;
  /* 要铺满选cover，要完整显示选contain */
  object-fit: cover;
}
.content {
  position: relative;
  z-index: 1;
  /* 页面内容的自定义样式 */
}

HTML结构：

<img src="../Images/mountain.jpg" alt="" class="bg-img">
<div class="content">
  <!-- 页面所有业务内容放在此处 -->
</div>

只有当你需要在不同尺寸的设备上展示完全不同构图的背景图时，才需要用到媒体查询加载不同图片，上述三种方案均可直接解决你的问题，不需要额外的媒体查询逻辑。

内容的提问来源于stack exchange，提问作者Biebk