bootstrap-4 - 如何使轮播显示所有尺寸相同的图像，这样我的页脚就不会被推下？

Question

我的旋转木马有 3 张图片，其中两张大小相同，其中一张大约是两倍大小。当加载大图像时，它会将我的页脚向下推到它下面。如何使所有图像显示相同大小，或者我可以调整轮播的高度？

标签： bootstrap-4

Answer 1

一些东西：

• 理想情况下，所有图像都应裁剪为相同大小
• 在您的情况下，我们可以将具有任意数字的 max-height 条件（我添加500px是因为这是我选择的图像中的最小高度）到我们的图像
• 这导致“更高”图像周围出现空白......为了突出这一点，我lightpink在轮播中添加了背景......并将图像居中，因为默认情况下它会保持对齐

下面的工作片段：

.carousel-item {
  background-color: lightpink
}

.carousel-inner img {
  max-height: 500px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="carousel slide" data-ride="carousel" id="carousel">

    <ul class="carousel-indicators">
      <li data-target="#carousel" data-slide-to="0" class="active"></li>
      <li data-target="#carousel" data-slide-to="1"></li>
      <li data-target="#carousel" data-slide-to="2"></li>
    </ul>

    <div class="carousel-inner">

      <div class="carousel-item active">
        <img src="https://www.w3schools.com/bootstrap4/la.jpg">
      </div>
      <div class="carousel-item">
        <img src="https://www.w3schools.com/bootstrap4/ny.jpg">
      </div>
      <div class="carousel-item">
        <img src="https://www.akberiqbal.com/Jumbo.jpg">
      </div>

    </div>

    <a class="carousel-control-prev left" href="#carousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next right" href="#carousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="carousel-control-next-icon"></span>
    </a>

  </div>
</div>