html - 如何制作半页 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 媒体查询来调整轮播元素的高度。较小设备屏幕的高度应小于您为大屏幕设置的一半值。因此，如果您将视口(viewport)高度设置为 50%(50vh)，则较小屏幕的视口(viewport)高度应该约为 30%(30vh)。因为较小的屏幕(移动设备)比具有较宽屏幕宽度(视口(viewport)宽度)的大屏幕具有更长的高度(视口(viewport)高度)。所以这里更多的是比例和比例。

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

    /* 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;
      }
    
    }