javascript - 如何缩小 Bootstrap 轮播中的图像

Question

我正在尝试构建一个轮播，作为我网站的背景图片封面，有点像 wordpress 中的革命性 slider ，但不是插件。我只是为我的静态网站构建它。问题是我的一些图像的高度和宽度不同，因此轮播无法正确调整。例如 img 号1 是 2048*3072 像素，第二个是 3072*2048 像素，依此类推。我想让我的轮播高度和宽度像封面图片一样 100%。当我将最小宽度和高度分别设置为 100% 和 100vh 时，图像会从底部裁剪。有帮助吗？这是我的代码

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

    <!-- Wrapper for slides -->
     <div class="carousel-inner" role="listbox">
     <div class="item active">
     <img class ="fill"src="img/msp_0409_3522.jpg" alt="Chania">
    </div>

     <div class="item">
      <img class ="fill" src="img/msp_0406_1786.jpg" alt="Chania">
     </div>

     <div class="item">
      <img class ="fill" src="img/msp_1608_9566.jpg" alt="Flower">
     </div>

    <div class="item">
     <img class ="fill" src="img/msp_1605_6918.jpg" alt="Flower">
    </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-                                 slide="prev">
   <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-    slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">    </span>
     <span class="sr-only">Next</span>
     </a>
    </div>

CSS

  html,body{
  height:100%;
  }
  .carousel,.item,.active{
 height:100%;
   }
 .carousel-inner{
 height:100%;
 }
 .fill{
  width:100%;
  height:100%;
  background-position:center
  ;background-size:cover;
  }

Answer 1

在您的代码中，它看起来像 .carousel-inner>.item>img 覆盖了您的填充类。为了覆盖 bootstrap 属性，请在您的类中添加一个 !important。

.fill {
    width: 100%;
    height: 100% !important;
}

您也不需要 background-position 或 background-size 因为它们只设置背景图片的样式

Code Pen link