如何使引导.card-IMG顶等高在响应宽？

Question

我提出了一系列引导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看起来愚蠢短，例如。看到这个动画的例子...

我如何能确保图像的高度实在是有求必应，即。它的高度在不同的断点变化？

有没有办法做到这一点使用引导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％是一个包含元素。