css - React 组件背景不随页面元素缩放

Question

编辑评论：

如您所见，background-size: cover选择器似乎以某种方式影响缩放容量。取消选择此选择器后，我可以正常缩放背景。

---

我有一个带有背景的反应应用程序，当我放大网页时，背景保持静态并且不会随其余元素一起缩放。这意味着在某个缩放级别，背景仅占据屏幕的上半部分。

这是一个例子。如您所见，蓝色注释区域是元素大于背景且背景不再填充屏幕的位置：

这是反应组件：

    <div id="app" className="d-flex h-100 flex-column home-background">
        <Provider value={providing}>
          <div className="app-dash">
            <LoggedInNav />
            <ChallengeModal/>
            <TeamsModal/>
            <ComingSoonModal/>
            <hr id="hr-below-nav"/>
            <div className="transition-group-dash">
              <TransitionGroup>
                <CSSTransition key={location.key} classNames="fade" timeout={100}>
                    <Router>
                      <Route path="/app/cat" component={Categories} />
                      <Route path="/app/faq" component={Faq} />
                      <Route path="/app/contact" component={Contact} />
                      <Route path="/app/logout" component={Logout} />
                    </Router>
                </CSSTransition>
              </TransitionGroup>
            </div>
          </div>
        </Provider>
    </div>

这是设置图像的css：

.home-background{
  background-image: url("./assets/backgrounds/loading-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  height:100%;
}

我添加了一些其他 CSS 以使背景以正常缩放级别正确填充：

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

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400&display=swap');
body{
  font-family: 'Source Sans Pro', sans-serif !important;
}

#root{
  height:100%;
  width: 100%;
}

html, body, #app, #app>div {
  height: 100%;
}

有没有办法解决这个问题？显然缩放是为了可访问性，并且从未设计为保留布局，所以我觉得这可能只是默认行为。但是，我不想假设并只是部署它，如果我可以让它更适合生产。

标签： cssreactjsbackground