如何使 Navbar 和 Carousel 始终全屏结合答案

【问题标题】：How to make Navbar and Carousel combined always full screen如何使 Navbar 和 Carousel 始终全屏结合
【发布时间】：2022-01-07 23:56:48
【问题描述】：

我想在我的页面顶部有一个导航栏。在此之下，我想要我的轮播，它应该总是占据整个剩余的屏幕。

这是我的导航栏：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/artworks">Artworks</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/collection">Fashion Collection</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/blog">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/about">About me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/contact">Contact me</a>
                </li>
            </ul>
          <form class="form-inline my-2 my-lg-0">
                <a class="navbar-brand" href="/">
                    <img src="/images/logo.png" height="30" class="d-inline-block align-top" alt="">
                </a>
          </form>
        </div>
      </nav>

这是我的轮播：

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-interval="5000">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
          </ol>
          <div class="carousel-inner">

                <div class="carousel-item active">
                        <img src="/images/test.jpg" class="d-block w-100" alt="...">
                        <a href="/artworks">
                            <div class="carousel-caption d-none d-md-block carousel-title ">
                            <h1>Get to my artworks...</h1>
                            <p>Lorem ipsum dolor sit amet</p>
                            </div>
                        </a>
                      </div>

                      <div class="carousel-item">
                        <img src="/images/test.jpg" class="d-block w-100" alt="...">
                        <a href="/collection">
                            <div class="carousel-caption d-none d-md-block carousel-title">
                            <h1>Get to my fashion collection...</h1>
                            <p>Lorem ipsum dolor sit amet </p>
                            </div>
                        </a>
                      </div>

                      <div class="carousel-item">
                          <img src="/images/test.jpg" class="d-block w-100" alt="...">
                          <a href="/blog">
                                <div class="carousel-caption d-none d-md-block carousel-title">
                                    <h1>Get to my blog...</h1>
                                    <p>Lorem ipsum dolor sit amet</p>
                                </div>
                            </a>
                        </div>

                        <div class="carousel-item">
                            <img src="/images/test.jpg" class="d-block w-100" alt="...">
                            <a href="/about">
                                <div class="carousel-caption d-none d-md-block carousel-title">
                                    <h1>Read some stuff about me...</h1>
                                    <p>Lorem ipsum dolor sit amet</p>
                                </div>
                            </a>
                        </div>

                        <div class="carousel-item">
                            <img src="/images/test.jpg" class="d-block w-100" alt="...">
                            <a href="/contact">
                                <div class="carousel-caption d-none d-md-block carousel-title">
                                    <h1>Contact me...</h1>
                                    <p>Lorem ipsum dolor sit amet</p>
                                </div>
                            </a>
                        </div>

          </div>

          <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

这些 sn-ps 或多或少直接取自 bootstrap 网站。这些只是为了我的目的而调整的。那么如何让轮播占据导航栏下方的整个屏幕呢？有任何想法吗？

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

添加这个 css

.carousel { height: calc(100vh - 56px);}
.carousel-inner,.carousel-item { height: 100%;}
.carousel-item { background-color: #000;}
.carousel-item img { height: 100%; object-fit: cover; object-position: center;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/artworks">Artworks</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/collection">Fashion Collection</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/blog">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/about">About me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/contact">Contact me</a>
                </li>
            </ul>
          <form class="form-inline my-2 my-lg-0">
                <a class="navbar-brand" href="/">
                    <img src="/images/logo.png" height="30" class="d-inline-block align-top" alt="">
                </a>
          </form>
        </div>
      </nav>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-interval="5000">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
          </ol>
          <div class="carousel-inner">

                <div class="carousel-item active">
                        <img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
                        <a href="/artworks">
                            <div class="carousel-caption d-none d-md-block carousel-title ">
                            <h1>Get to my artworks...</h1>
                            <p>Lorem ipsum dolor sit amet</p>
                            </div>
                        </a>
                      </div>

                      <div class="carousel-item">
                        <img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
                        <a href="/collection">
                            <div class="carousel-caption d-none d-md-block carousel-title">
                            <h1>Get to my fashion collection...</h1>
                            <p>Lorem ipsum dolor sit amet </p>
                            </div>
                        </a>
                      </div>

                      <div class="carousel-item">
                          <img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
                          <a href="/blog">
                                <div class="carousel-caption d-none d-md-block carousel-title">
                                    <h1>Get to my blog...</h1>
                                    <p>Lorem ipsum dolor sit amet</p>
                                </div>
                            </a>
                        </div>

                        <div class="carousel-item">
                            <img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
                            <a href="/about">
                                <div class="carousel-caption d-none d-md-block carousel-title">
                                    <h1>Read some stuff about me...</h1>
                                    <p>Lorem ipsum dolor sit amet</p>
                                </div>
                            </a>
                        </div>

                        <div class="carousel-item">
                            <img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
                            <a href="/contact">
                                <div class="carousel-caption d-none d-md-block carousel-title">
                                    <h1>Contact me...</h1>
                                    <p>Lorem ipsum dolor sit amet</p>
                                </div>
                            </a>
                        </div>

          </div>

          <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

【讨论】：

可以，但是图像不能自动调整...它已经很有帮助了，但是有没有机会让图像自动调整？
图片未显示，因为完整路径不存在。因此，保留了一个虚拟图像路径。请检查一下。
对于自动图像调整，您可以使用“object-fit:cover;”将样式属性放入图像标签中......例如：
如果我调整屏幕大小，它仍然不会在整个屏幕上显示图像：/
@MockingJay 为 img 添加了样式

【解决方案2】：

图像比例不是相同的视口比例。如果不使用背景图像很难做到这一点...

你需要考虑当视口和图像比例不相等时会发生什么......

您希望将图像从屏幕上剪掉吗？
缩小以适应屏幕宽度或高度（需要保持纵横比）？
拉伸以适应（导致图像变形，失去纵横比）？

选项 1

为了使轮播填充该导航栏下的剩余高度，请使用flex-grow:1。然后，当它们对于屏幕（视口宽度）来说太宽时，剪裁图像边。这允许图像填充高度，但不会丢失它们的纵横比。

演示：https://www.codeply.com/p/5QnXTjbOFL

CSS

/* make active item container fill height of viewport using flexbox */
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
    flex: 1 0 100%;
}

/* fix transitioning item height */
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right,
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
    flex: 0 0 0;
}

/* make images fill height and width or clip */
.carousel-item {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.img-1 {
    background-image: url(..);
}

.img-2 {
    background-image: url(..);
}

HTML

<div class="container-fluid d-flex min-vh-100 flex-column px-0 justify-content-center">
    <nav class="navbar navbar-expand-md navbar-light bg-light flex-shrink-0">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Navbar</a>
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </nav>
    <div id="carouselExampleControls" class="carousel slide flex-fill d-flex flex-column  justify-content-center" data-ride="carousel">
        <div class="carousel-inner flex-fill d-flex flex-column">
            <div class="carousel-item active img-1">
            </div>
            <div class="carousel-item mg-2">
            </div>
        </div>
    </div>
</div>

选项 2

如果您必须使用图像，您可以让object-fit 在不使用选项 1 中使用的 flexbox 的情况下工作。使用 calc 确定轮播的高度（减去 56px 的导航栏高度）。这将阻止垂直滚动条...

/* make images fill height and width or clip */
.carousel-item > img {
    object-fit: cover;
    height: calc(100vh - 56px);
    width: 100%;
}

演示2：https://www.codeply.com/p/HR6phylC7q

另见：Bootstrap Carousel Full Screen

【讨论】：