如何使 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该专栏中申请。再次，快乐。

图片高度：

然而我的问题就在这里。

为了解决这个问题，我应用了heightCSS 属性.card-img-top......

/* Equal-height card images, cf. /sf/answers/3338874101/*/
.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%。