Bootstrap Carousel 如何使用应用的 img-fluid 类垂直对齐图像答案

【问题标题】：Bootstrap Carousel how to vertical align images with img-fluid class appliedBootstrap Carousel 如何使用应用的 img-fluid 类垂直对齐图像
【发布时间】：2021-05-15 02:03:18
【问题描述】：

我正在尝试使用引导轮播中的 img-fluid 类将图像水平和垂直居中，我需要图像完全可见（100%）并适应不同的屏幕，为此我使用 img -fluid 类，唯一的问题是它不会垂直居中图像，所以如果我有一个横向图像，它位于顶部，在下面留下很大的空间。另一方面，对于肖像图像则没有问题。

风景：

肖像

这是使用的代码：

     <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 和其他组合但没有结果，我该怎么办？

【问题讨论】：

标签： html css bootstrap-4 carousel

【解决方案1】：

我自己解决了这个问题，使用绝对定位并删除了 img-fluid 类。

下面是更新的代码：

    <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>

这里是截图：

【讨论】：