Question

我正在创建一个React页面。

我想添加一个覆盖背景的背景图像，无论窗口大小或分辨率等等。

所以这就是我对背景的看法。

import coolImportedImage from '../../images/image_background.jpg';

const BackGroundContainer = styled.div`
    background-image: url(${coolImportedImage});
    background-repeat: no-repeat;
    background-size:cover;
    width: 100%;
    height: 1080px;
`;

...和渲染方法：

render(){

    return(
      <BackGroundContainer>
        <CenteredLoginPanel>
          ...some components...
        </CenteredLoginPanel>
      </BackGroundContainer>
    );
  }

它的工作正常，但我希望高度也是相对的。只需按宽度填充窗口的背景。

但是，高度不适用于100％。它需要具有特定值，例如1080px（此图像为1080px高）。

现在，我知道原因。 div必须有一些内容要呈现。但我正在寻找的是获得我想要做的事情的最佳做法，这是一个覆盖窗户宽度和高度的背景。

或者是否有一种更好的方法可以完全做到这一点，因为我的方法是以错误的方式开始？

Answer 1

提供视口高度

height:100vh;

Answer 2

尝试VH而不是px的高度。希望它能起作用

const BackGroundContainer = styled.div`
background-image: url(${coolImportedImage});
background-repeat: no-repeat;
background-size:cover;
width: 100%;
height: 100vh;

`;

没有特定高度的背景图像

2 个答案: