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。

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

卡片高度：

FYI-尽管内容相同，但要强制等高卡，您会在列中看到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％。

如何使Bootstrap的.card-img-top高度相等于响应宽度？

1 个答案: