Bootstrap Carousel 如何在应用 img-fluid class 的情况下垂直对齐图像

Question

我正在尝试使用 bootstrap 旋转木马中的 img-fluid class 将图像水平和垂直居中，我需要图像完全可见 (100%) 并适应不同的屏幕，为此我使用的是 img-fluid class，唯一的问题是图像不能垂直居中，所以如果我有横向图像，它位于顶部，留下一个大 space 以下。另一方面，对于人像图像则没有问题。

横向：

纵向

这是使用的代码：

     <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="background-color:#333;">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item text-center active">
              <img class="img-fluid mw-100 mh-100" src="https://storage.googleapis.com/...">
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
      </div>

我已经尝试过使用align-middle等组合没有效果，我该怎么办？

Answer 1

我自己用绝对定位和去掉img-fluid解决了class.

下面是更新后的代码：

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="background-color:#333;">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active" style="max-height:600px;">
          <img class="mw-100 mh-100" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;" src="https://storage.googleapis.com/...">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
     </div>

这里是截图：

Bootstrap Carousel 如何在应用 img-fluid class 的情况下垂直对齐图像

Bootstrap Carousel how to vertical align images with img-fluid class applied

html

css

carousel

bootstrap-4