React.js中App.js设置的背景图片无法全屏显示如何解决

当前异常效果截图：

问题原因 #

承载背景图的.App容器未设置全屏高度，同时缺少背景图适配属性，导致无法铺满整个视口。

修复方案 #

任选以下一种方式修改即可：

方案1：补充CSS样式

在你现有的index.css中追加.App类的配置：

.App {
  min-height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

min-height: 100vh表示容器最小高度等于整个浏览器视口高度，即使页面内容很少也能铺满全屏，内容超出时会自动适配高度。

方案2：修改行内样式

直接调整你的JSX代码，把相关属性写在行内style中：

<div 
  style={{ 
    backgroundImage: `url(${Image})`,
    minHeight: '100vh',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center'
  }} 
  className="App"
>
  routes
</div>

你之前配置的body、html样式可以正常保留，不会和上述配置产生冲突。

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