Question

我习惯于做出反应原生并尝试使用reactjs，但是我对自己感到非常沮丧，因为我理解很多反应如何使用反应本机，但我不能正确设置我的组件，因为我我不习惯css。

我正在使用ant设计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');

背景图像与反应js - 不显示全屏

1 个答案: