在 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'>
    );
}

在登录.css

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

最终结果： 屏幕截图

原文由 user9226007 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试使用特定的属性值。

在 Index.css 中：

 body, html {
    height: 100%;
    margin: 0;
}

在 Login.css 中：

 .Login-component {
    /* The image used */
    background-image: url(../static/login-bg.jpg);

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

原文由 otolock 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 vh 和 vw 属性：

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

原文由 Nick Sherman 发布，翻译遵循 CC BY-SA 4.0 许可协议