如何制作半页Bootstrap轮播？

Question

我想将Bootstrap 3轮播制作为半页，但是我看不到要进行哪些更改。在一个小窗口中看起来不错，但是当我将窗口扩展到全屏时，轮播实际上占据了整个页面。如何在整个窗口上使Bootstrap传送带半页？

我尝试将其放在标题中，但这没用。

<div id="carousel1" class="carousel slide carousel-fade" data-ride="carousel">
  <!--Indicators-->
  <ol class="carousel-indicators">
    <li data-target="#carousel1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel1" data-slide-to="1"></li>
    <li data-target="#carousel1" data-slide-to="2"></li>
  </ol>
  <!--/.Indicators-->
  <!--Slides-->
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <div class="view">
        <img class="d-block w-100" src="write2.jpg"
          alt="First slide">
        <div class="mask rgba-black-light"></div>
      </div>
      <div class="carousel-caption">
        <h3 class="h3-responsive">Light mask</h3>
        <p>First text</p>
      </div>
    </div>
    <div class="carousel-item">
      <!--Mask color-->
      <div class="view">
        <img class="d-block w-100" src="step21.jpg"
          alt="Second slide">
        <div class="mask rgba-black-strong"></div>
      </div>
      <div class="carousel-caption">
        <h3 class="h3-responsive">Strong mask</h3>
        <p>Secondary text</p>
      </div>
    </div>
    <div class="carousel-item">
      <!--Mask color-->
      <div class="view">
        <img class="d-block w-100" src="read.jpg"
          alt="Third slide">
        <div class="mask rgba-black-slight"></div>
      </div>
      <div class="carousel-caption">
        <h3 class="h3-responsive">Slight mask</h3>
        <p>Third text</p>
      </div>
    </div>
  </div>
  <!--/.Slides-->
  <!--Controls-->
  <a class="carousel-control-prev" href="#carousel1" 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="#carousel1" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  <!--/.Controls-->
</div>

更新！轮播现在处于半屏状态，但是随着窗口的扩大，图像变得越来越大。我根据用户的建议，使用CSS代码将轮播制作为半页，但再次将其作为窗口扩展，图像将被放大。如何在窗口扩展时不使图像放大？

.carousel-inner{
    height: 50vh;
}


.item img{
    height: 100% !important;
    width:  100% !important;
}

Answer 1

以下适用于 Bootstrap 4。为了防止图像在较小的屏幕上放大，您必须使用 CSS 媒体查询来调整轮播项目的高度。较小设备屏幕的高度应小于您为大屏幕设置的一半值。因此，如果您将视口高度设置为 50%(50vh)，则较小屏幕的视口高度应该类似于 30%(30vh)。因为较小的屏幕（移动设备）比具有更宽屏幕宽度（视口宽度）的大屏幕具有更长的高度（视口高度）。所以这里更多的是比例和比例。

以下代码应该适用于您的情况。

    /* Carousel 1/2 of screen */
    
    .carousel-item.active, .carousel-item .view {
        height: 50vh!important;
      }
      .carousel-item.active, .carousel-item  {
        height: 50vh!important;
      }
    
      .carousel-item img {
        object-fit: cover;
        width:100%!important;
        height: 100% !important;
      }
    
      .content h1 {
        font-size: 55px;
      }
      .content h5 {
        font-size: 23px;
        margin-left: 80px;
        margin-right: 80px;
      }
    
      /*MEDIA QUERIES RESPONSIVE DESIGN */
    
    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {
        /* Carousel 1/2 of screen */
    
    .carousel-item.active, .carousel-item .view {
        height: 30vh!important;
      }
      .carousel-item.active, .carousel-item  {
        height: 30vh!important;
      }
    
      .carousel-item img {
        object-fit: cover;
        width:100%!important;
        height: 100% !important;
      }
    } 
    
    /* Small devices (portrait tablets and large phones, 600px and up) */
    @media only screen and (min-width: 600px) {
            /* Carousel 1/2 of screen */
    
    .carousel-item.active, .carousel-item .view {
        height: 30vh!important;
      }
      .carousel-item.active, .carousel-item  {
        height: 30vh!important;
      }
    
      .carousel-item img {
        object-fit: cover;
        width:100%!important;
        height: 100% !important;
      }
    
    } 
    
    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {
    /* Carousel 1/2 of screen */
    
    .carousel-item.active, .carousel-item .view {
        height: 30vh!important;
      }
      .carousel-item.active, .carousel-item  {
        height: 30vh!important;
      }
    
      .carousel-item img {
        object-fit: cover;
        width:100%!important;
        height: 100% !important;
      }
    } 
    
    /* Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-width: 992px) {
        /* Carousel 1/2 of screen */
    
    .carousel-item.active, .carousel-item .view {
        height: 50vh!important;
      }
      .carousel-item.active, .carousel-item  {
        height: 50vh!important;
      }
    
      .carousel-item img {
        object-fit: cover;
        width:100%!important;
        height: 100% !important;
      }
    
    } 
    
    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1200px) {
        /* Carousel 1/2 of screen */
    
    .carousel-item.active, .carousel-item .view {
        height: 50vh!important;
      }
      .carousel-item.active, .carousel-item  {
        height: 50vh!important;
      }
    
      .carousel-item img {
        object-fit: cover;
        width:100%!important;
        height: 100% !important;
      }
    
    }

Answer 2

已更新，已按照您在下面的评论中提到的jsFiddle升级到Bootstrap 4

    .carousel-item.active, .carousel-item .view {
      height: 50vh!important;
    }

    .carousel-item img {
      object-fit: cover;
      width:100%!important;
      height: 100% !important;
    }

    .content h1 {
      font-size: 55px;
    }

    @media screen and (max-width: 320px) {
      .content h1 {
        font-size: 30px;
      }
    }

    @media screen and (min-width: 321px) and (max-width: 768px) {
      .content h1 {
        font-size: 30px;
      }

      
    }

    .content h5 {
      font-size: 23px;
      margin-left: 80px;
      margin-right: 80px;
    }

    @media screen and (max-width: 320px) {
      .content h5 {
        font-size: 18px;
        margin-left: 20px;
        margin-right: 20px
      }

    }

    @media screen and (min-width: 321px) and (max-width: 768px) {
      .content h5 {
        font-size: 18px;
        margin-left: 20px;
        margin-right: 20px;
      }
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
</head>

<body>

 <div class="container-fluid">
  <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #515151;">
    <a class="navbar-brand" href="homepage.html">Title</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
      aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 2</a>
        </li>
      </ul>


    </div>
  </nav>

  

    <div id="carousel1" class="carousel slide carousel-fade" data-ride="carousel" style="height:50vh">
      <!--Indicators-->
      <ol class="carousel-indicators">
        <li data-target="#carousel1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel1" data-slide-to="1"></li>
        <li data-target="#carousel1" data-slide-to="2"></li>
      </ol>
      <!--/.Indicators-->
      <!--Slides-->
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <div class="view">
            <img  src="https://www.w3schools.com/bootstrap/la.jpg" alt="New york"
               alt="First slide">
            <div class="mask rgba-black-light"></div>
          </div>
          <div class="carousel-caption">
            <h3 class="h3-responsive">Light mask</h3>
            <p>First text</p>
          </div>
        </div>
        <div class="carousel-item">
          <!--Mask color-->
          <div class="view">
            <img  src="https://www.w3schools.com/bootstrap/la.jpg" alt="New york"
              alt="Second slide">
            <div class="mask rgba-black-strong"></div>
          </div>
          <div class="carousel-caption">
            <h3 class="h3-responsive">Strong mask</h3>
            <p>Secondary text</p>
          </div>
        </div>
        <div class="carousel-item">
          <!--Mask color-->
          <div class="view">
            <img  src="https://www.w3schools.com/bootstrap/la.jpg" alt="New york"
               alt="Third slide">
            <div class="mask rgba-black-slight"></div>
          </div>
          <div class="carousel-caption">
            <h3 class="h3-responsive">Slight mask</h3>
            <p>Third text</p>
          </div>
        </div>
      </div>
      <!--/.Slides-->
      <!--Controls-->
      <a class="carousel-control-prev" href="#carousel1" 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="#carousel1" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
      <!--/.Controls-->
    </div>
  </div>
</body>

</html>

以下内容适用于Bootstrap 3

.carousel-inner{
    height: 50vh;
}
.item.active{
  height: 50vh!important;
}
.item img{
 object-fit:cover;
 height:100%!important;
}