帶有react js的背景圖像 - 不顯示全屏

Question

我習慣於使用 React Native 並嘗試使用 reactjs，但是我對自己感到非常沮喪，因為我了解使用 React Native 時 React 是如何工作的，但我無法正確設置組件的樣式，因為我不是習慣了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;

唯一的問題是現在我在圖像下方留下了適當大小的填充，因為它渲染了我的視口的全高

Answer 1

嘗試這個：

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