有没有办法根据浏览器的高度和宽度设置 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

使用 bootstrap 的 img-fluid class。

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

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

Answer 2

您可以通过一点 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。

，您将添加到他的轮播中的所有项目都将显示为正确大小 的背景图片

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

Is There a way to set height and width of BS4 carousel image according to browsers height and width?

html

css

carousel

image-size

bootstrap-4