html - 如何让我的 "jumbotron"响应？

Question

.jumbotron{
  width:100%;
  height:50vh;
  background: url('longboard.jpeg');
  color:white;
}

我正在尝试从头开始构建一个“jumbotron”。目前，它的 html 只是一个什么都没有的东西。截至目前，图片只是在右侧切断，而我的导航栏向下缩放。我希望背景图片也随之缩小。我该怎么做？

此外，每当我向 div 添加一个或任何东西时，我的导航栏上方都会出现一个边距，我没有连接它。如果我违反了任何发帖礼仪，请提前道歉，这是我在这里的第一篇帖子。

Answer 1

也许试试这个:

.jumbotron {
    background: url('longboard.jpeg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 50vh;
    width: 100%;
    overflow: hidden;
    color: white;
}

资源 - https://css-tricks.com/perfect-full-page-background-image/