reactjs - 在Reactjs中将背景图片设置为全屏

Question

我尝试在 React 中设置背景图像，但它只覆盖大约 75% 的高度。

看起来该组件并没有占据所有的高度。

解决办法是什么？

在index.js中:

ReactDOM.render(<Login />, document.getElementById('root'));

在index.css中:

html, body, .Login-component {
  height: 100%;
}

在 Login.js 中:

render() {
    return (
      <div className='Login-component'>
    );
}

在Login.css中

.Login-component {
    background: url(../static/login-bg.jpg) no-repeat center center fixed;
  background-size: cover;
}

最终结果:Screen shot

Answer 1

使用 vh 和 vw 属性:

const styles = {
    container: {
        backgroundImage: `url(${backgroundImage})`,
        backgroundPosition: 'center',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        width: '100vw',
        height: '100vh'
    }
};