带有反应js的背景图片 - 不显示全屏答案

【问题标题】：Background image with react js - not displaying full screen带有反应js的背景图片 - 不显示全屏
【发布时间】：2018-10-24 13:51:35
【问题描述】：

我习惯于 react native 并尝试使用 reactjs，但是我对自己感到非常沮丧，因为我了解了很多 react 是如何通过使用 react native 工作的，但是我无法正确设置组件的样式，因为我不习惯css。

我正在使用 ant design UI 框架来帮助我构建一个小型 Web 应用程序，到目前为止，我的导航栏位于应用程序的顶部，但想在下方设置一个占 100% 的图像屏幕并将高度自动设置为纵横比。

我目前正在尝试这个，但它不起作用。

<div className="background">
</div>

//In App.css

.background {
  background-image: url('./assets/main-image.jpg');
  background-size: 'contain';
  width: 100%;
  height: auto;
}

我已经尝试了上述方法以及其他一些方法，但没有任何效果。似乎高度取决于 div 内的任何内容。例如，如果我在 div 中放置一个 h1 标签，那么我可以看到图像，但高度只有几个像素。

我的图片宽度为 4000 像素，是横向的。我只是希望能够根据屏幕分辨率动态显示图像。

有人能指出正确的方向吗？

谢谢

编辑：我现在已将我的 css 背景类设置为这个，它几乎就在那里。

  background-image: url('./assets/main-image.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;

唯一的问题是现在我在图像下方留下了相当大小的填充，因为它渲染了我的视口的整个高度

【问题讨论】：

尝试将高度设置为100vh，将宽度设置为100vw
@GabrielCarneiro 感谢您的回复。这实际上做了一些与我习惯不同的事情。但是，尽管我将大小设置为“包含”，但图像很大并且似乎没有缩放。
试着去掉包含周围的引号
@wariofan1 哈哈，正如您发布的那样，我刚刚意识到这可能是一种可能性。谢谢！它有效，但是一个问题是，通过使用 vh 和 vw 单位，它使图像重复，因为它通过它的外观而不是选项卡窗口使用我的屏幕资源。有什么地方可以抓取窗口尺寸并使用它们进行设置吗？或动态设置宽度和高度
将宽度和高度都设置为未定义会发生什么？

标签： javascript css reactjs

【解决方案1】：

试试这个：

position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');

【讨论】：