html - 有没有办法根据浏览器的高度和宽度设置 BS4 轮播图像的高度和宽度？

Question

我正在使用 BS4 完整轮播，我放入其中的图片比屏幕大得多。它们的宽度还可以，但高度很大，用户必须滚动才能看到完整的图像，请告诉我一种在不影响图片形状和质量的情况下降低高度的方法？请指导。 并告诉我如何动态调整它？ 所有样式都默认为 BS4 。代码如下:

<div id="carouselFull" class="carousel slide" data-ride="carousel">
   <!--    <ol class="carousel-indicators">
           <li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
           <li data-target="#carouselIndicators" data-slide-to="1"></li>
           <li data-target="#carouselIndicators" data-slide-to="2"></li>
       </ol>

  -->

       <div class="carousel-inner">
           <div class="carousel-item active">
               <img class="d-block w-100" src="img/Home_pics/1.jpg" alt="First slide" id="myImg">

           </div>
           <div class="carousel-item">
               <img class="d-block w-100" src="img/Home_pics/2.jpg" alt="Second slide" id="myImg">

           </div>
           <div class="carousel-item">
               <img class="d-block w-100" src="img/Home_pics/3.jpg" alt="Third slide" id="myImg">

           </div>

           <div class="carousel-item">
               <img class="d-block w-100" src="img/Home_pics/4.jpg" alt="First slide" id="myImg">

           </div>
           <div class="carousel-item">
               <img class="d-block w-100" src="img/Home_pics/5.jpg" alt="Second slide" id="myImg">

           </div>
           <div class="carousel-item">
               <img class="d-block w-100" src="img/Home_pics/6.jpg" alt="Third slide" id="myImg">

           </div>

           <div class="carousel-item">
               <img class="d-block w-100" src="img/Home_pics/7.jpg" alt="First slide" id="myImg">

           </div>
           <div class="carousel-item">
               <img class="d-block w-100" src="img/Home_pics/8.jpg" alt="Second slide" id="myImg">

           </div>
           <div class="carousel-item">
               <img class="d-block w-100" src="img/Home_pics/9.jpg" alt="Third slide" id="myImg">

           </div>


       </div>
       <a class="carousel-control-prev" href="#carouselFull" 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="#carouselFull" role="button" data-slide="next">
           <span class="carousel-control-next-icon" aria-hidden="true"></span>
           <span class="sr-only">Next</span>
       </a>
   </div>   

Answer 1

您可以使用一些 jQuery 将您的内联图像变成背景图像:

$('#carouselFull').find('.carousel-item').each(function() {
  var imgContainer = $(this),
    bkImg = imgContainer.find('img').attr('src');
  imgContainer.css("background-image", 'url("' + bkImg + '")');
});

#carouselFull {
  width: 100%;
}

#carouselFull .carousel-item {
  height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.carousel-item img {
  display: none;
}


/* Optionally, put the contols closer to the sides */
.carousel-control-next, .carousel-control-prev {
  width: 12.5% !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div id="carouselFull" class="carousel slide" data-ride="carousel">

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="/image/ZeOrf.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="/image/TICOa.jpg" alt="Second slide">
    </div>

  </div>
  <a class="carousel-control-prev" href="#carouselFull" 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="#carouselFull" role="button" data-slide="next">
           <span class="carousel-control-next-icon" aria-hidden="true"></span>
           <span class="sr-only">Next</span>
       </a>
</div>

由于 background-size: cover，您将添加到他的旋转木马中的所有元素都将显示为具有正确大小的背景图像。