如何在Bootstrap轮播中缩小图像

Question

我正在尝试构建一个轮播图，作为我的网站背景图片覆盖物，类似于WordPress中的Revolutionary Slider，但不是插件。我只是为我的静态网站构建它。问题在于我的一些图片具有不同的高度和宽度，因此轮播图不能正确调整。例如，第1张图片是2048 * 3072像素，第2张是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;
  }

- puneet saraswat

---

身体的高度应该以像素为单位，然后您可以使用 height: 100%。因为它需要一个参考高度才能正常工作。 - Tumen_t

@Tumen_t 不完全是这样。height: 100％;不需要像素值来继承，但它确实需要在其父元素上设置高度（可以是任何单位），以便它可以计算出某个高度的100％等于多少。 OP在html和body上都设置了height: 100％;。这会导致body从html继承，而html从视口继承。请参考[此工作示例]（https://jsfiddle.net/ymern7h3/）。 - hungerstar

Answer 1

在您的代码中，看起来像是.carousel-inner>.item>img覆盖了您的fill类。为了覆盖Bootstrap属性，请在您的类中添加!important。

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

你不需要使用background-position或者background-size，因为它们只用于样式化背景图片。 Code Pen 链接

- Elliot

---

我尝试了这个，图片底部没有被裁剪，但宽度不保持100%。高度正常工作。有什么想法为什么会这样？ - puneet saraswat

Answer 2

你应该使用object-fit属性。 你可以尝试像这样：

.carousel-inner img {
  object-fit: contain;
}

https://css-tricks.com/almanac/properties/o/object-fit/

- Alexandre Nicolas

Answer 3

关于背景图片，您可以使用：

background-image: url("image.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

- TECHMIX.be