如何在响应宽度下使 Bootstrap .card-img-top 等高？

Question

我正在展示一系列这样的 Bootstrap 4 卡片...

<div class="row">

  <!-- column -->
  <div class="d-flex align-items-stretch col-xs-12 col-sm-6 col-md-4 col-lg-2 p-2">
      <!-- card -->
      <div class="card rounded-0 w-100 bg-white">
          <a href="http://www.example.com/destination.html">
            <img src="http://www.www.example.com/images/photo.jpg" class="card-img-top img-responsive w-100">
          </a>
          <div class="card-body">
            <h6 class="card-title">Bookish Blaenavon opens new chapter</h6>
          </div>
      </div>
      <!-- end card -->
  </div>
  <!-- end column -->

  <! -- more of the same cards here +++ -->

</div>

所有图像的尺寸可能不相等，但通过它们的类.card-img-top，应该以一致的尺寸显示。

宽度：

仅供参考 - 为了解决宽度问题，我已经将 .w-100 添加到 .card 和 img，尽管我认为后者可能是多余的。

另外，我的样式表将object-fit: cover; 应用于.card-img-top。

它似乎工作正常，这意味着我不必使用卡片组来强制保持一致性。我很高兴，如果它是合法的。

卡片高度：

仅供参考 - 要强制等高卡片，尽管它们的内容很长，你会看到我在列中应用 d-flex align-items-stretch。再次，快乐。

图像高度：

不过，我的问题出在这里。

为了解决这个问题，我将height CSS 属性应用于.card-img-top...

/* Equal-height card images, cf. https://stackoverflow.com/a/47698201/1375163*/
.card-img-top {
    height: 11vw;
    object-fit: cover;
} 

问题是，在每个浏览器宽度下，img 都保持相同的高度。例如，这使得它在sm 上看起来很短。看这个动画例子...

如何确保图像高度真正响应，即。它的高度在不同的断点处会发生变化吗？

有没有办法使用 Bootstrap 4 的东西来做到这一点，而不是编写媒体查询代码来复制它使用的相同宽度？

我为宽度所做的任何事情是否会减轻高度的结果？

Answer 1

您可以在 img 上设置绝对最小和最大高度，这将为您的图像建立一个可以增长和缩小的范围：

.card-img-top {
    max-height: 200px;
    min-height: 150px;
    object-fit: cover;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

  <!-- column -->
  <div class="d-flex align-items-stretch col-xs-12 col-sm-6 col-md-4 col-lg-2 p-2">
      <!-- card -->
      <div class="card rounded-0 w-100 bg-white">
          <a href="http://www.example.com/destination.html">
            <img src="https://via.placeholder.com/350x150" class="card-img-top img-responsive w-100">
          </a>
          <div class="card-body">
            <h6 class="card-title">Bookish Blaenavon opens new chapter</h6>
          </div>
      </div>
      <!-- end card -->
  </div>
  <!-- end column -->

  <! -- more of the same cards here +++ -->

</div>

您也不需要在图像上设置 .w-100 的类，因为 .card-img-top 将宽度设置为包含元素的 100%。