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/

Answer 2

最简单的方法是将背景大小设置为unionAll

"cover"

如何让我的“jumbotron”响应？

2 个答案: