React项目中background-size设为cover背景图显示，设为contain时不显示如何解决

数据老陈

2026-9-25

问题原因

background-size: contain和background-size: cover的渲染逻辑差异，加上body元素的高度计算规则冲突，是导致该问题的核心原因：

cover模式会强制背景图完全覆盖元素的可见区域，无论元素宽高比是否和图片匹配，都会裁剪超出部分铺满区域，所以即使元素尺寸计算存在偏差，也能正常显示图片。
contain模式会完整保留图片的宽高比，等比缩放到整张图都能放入元素区域为止，不会裁剪图片。你给body设置了height: auto+min-height: 100vh+position: absolute的组合规则，部分浏览器在计算绝对定位元素的contain背景可用区域时，会误将仅设置了min-height、没有显式height的元素高度判定为0，导致图片缩放后尺寸为0不可见。

可用解决方案

方案1：给body设置显式高度

将原来的height: auto替换为height: 100vh，如果需要支持内容超出视口滚动，额外添加overflow-y: auto即可：

body {
  min-height: 100vh;
  height: 100vh;
  overflow-y: auto;
  width: 100vw;
  max-width: 100vw;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0 auto;
  background: center / contain no-repeat url("../img/boulder.jpg");
}

方案2：使用伪元素承载背景图

如果不想固定body的高度，可以将背景图附加到层级更低的绝对定位伪元素上，不影响正常内容流的高度计算：

body {
  min-height: 100vh;
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 0;
  top: 0;
  margin: 0 auto;
}
body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: center / contain no-repeat url("../img/boulder.jpg");
  z-index: -1;
}