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

Posted 2023-03-06

【中文标题】如何在响应宽度下使 Bootstrap .card-img-top 等高？

【英文标题】：How to make Bootstrap's .card-img-top equal height at responsive widths?

【发布时间】：2019-03-23 02:28:39

【问题描述】：

我正在展示一系列这样的 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://***.com/a/47698201/1375163*/
.card-img-top 
    height: 11vw;
    object-fit: cover;
 

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

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

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

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

【问题讨论】：

你可能想看看这个：- codepen.io/migli/pen/OQVRMw

@AnjanaSilva 那使用 .card-deck 我不想。或者，也许您指的是 CSS 对断点所做的事情？那里相当复杂，我不理解。

查看此链接***.com/questions/56437535/…

【参考方案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%。

【讨论】：

谢谢，1) 但是在 Superted 的较窄断点处会发生一些奇怪的事情，其图像较小 g.recordit.co/vLuvczCGct.gif - 就像新属性可能会覆盖以前扩展该图像的能力，即使它没有' t 填充空间。 2) 在响应的意义上，关于使用最小/最大 px 值的感觉不太正确......？

1.) 您需要将高度设置为 100% 以使图像缩放（我已经更新了我的答案） 2.) 在个人处理布局方面的响应时，我主要关心的是宽度，如果你想真正响应，你应该在不同的屏幕分辨率下使用不同的图像尺寸，而不是让大图像缩放。

仅供参考，添加height: 100% 仍然会留下一个问题，即现在无法缩放较小的图像以占用空间。例如。超了。

这种情况只发生在包含“Superted”图像的元素上吗？

没有。以下是应用 min-height 和 max-height 时的其他内容 - i.imgur.com/oQ4CINa.png