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

Question

我使用的是 BS4 full carousel，我放入的图片比 screen 大得多。它们的宽度还可以，但高度很大，用户必须滚动才能看到完整的图像，请告诉我一种在不影响图片形状和质量的情况下降低高度的方法吗？请对此进行指导。 告诉我如何动态调整它？ 所有样式默认为 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="https://i.stack.imgur.com/ZeOrf.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="https://i.stack.imgur.com/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，您将添加到他的轮播中的所有项目都将显示为具有正确尺寸的背景图像。

Answer 2

使用 bootstrap 的 img-fluid 类。

<img src="..." class="img-fluid" alt="Responsive image">

https://getbootstrap.com/docs/4.1/content/images/