bootstrap - 制作具有相同高度的图像的卡片

Question

如您所见，我确实有 3 张引导卡，其中包含 3 张不同高度的图像。我想让图像与其他图像具有相同的高度（比如较大的图像“带头”，而行中的所有其他图像都适应这个更大的图像）。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-4 col-md-6 mb-4">
    <div class="card h-100">
        <a href="/led/catalogue/produit/1"><img class="card-img-top" src="/images/produits/1" alt=""></a><hr>
        <div class="card-body">
            <h6 class="card-title">
                <a href="/led/catalogue/produit/1">slt la mif</a>
            </h6>
            <small class="text-muted">Puissance : 10 à 100W</small>
        </div>
    </div>
</div>

我已经将 h-100 类放在卡片 div 中，但它只调整卡片的高度，我希望调整图像（为了在文本后面没有空白），请问该怎么做？

Answer 1

Bootstrap 类card-body 具有属性flex: 1，这意味着该元素也会随着可用空间而增长。

您可以添加一些特殊的类，例如行或更高，您使用卡片的地方，以修改该参数。类似的东西。

.special .card-body {
  flex-grow: 0;
}

还用div 包裹链接图片，其中class="flex-fill"，它使链接图片增长。

查看sn-p，我已经为行添加了特殊的类，并设置了不同的高度来链接图像以说明这个想法。

更新。制作链接图片中心

玩弹性盒子。例如：添加到 div 包装 <a> 类 d-flex 它将使这个 div 与 display: flex。然后你可以添加到这个div类justify-content-center和align-items-center，但我更喜欢在你的情况下添加类m-auto到<a>，它给出margin: auto，这使得元素集中在flex父级。看看sn-p。

.special .card-body {
  flex-grow: 0;
}

.img_mock1 {
  padding: 50px;
  background-color: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row special">
  <div class="col-lg-4 col-md-6 mb-4">
    <div class="card h-100">
      <div class="flex-fill d-flex">
        <a href="/led/catalogue/produit/1" style="height:50px;" class="m-auto"><span class="img_mock1"></span></a>
      </div>
      <hr>
      <div class="card-body">
        <h6 class="card-title">
          <a href="/led/catalogue/produit/1">slt la mif</a>
        </h6>
        <small class="text-muted">Puissance : 10 à 100W</small>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-6 mb-4">
    <div class="card h-100">
      <div class="flex-fill d-flex">
        <a href="/led/catalogue/produit/1" style="height:300px;" class="m-auto">
          <img src="" alt="">
        </a>
      </div>
      <hr>
      <div class="card-body">
        <h6 class="card-title">
          <a href="/led/catalogue/produit/1">slt la mif</a>
        </h6>
        <small class="text-muted">Puissance : 10 à 100W</small>
      </div>
    </div>
  </div>
</div>

Answer 2

使用以下 CSS

.card-img-top {
    width: 100%;
    height: 15vw;
    object-fit: cover;
}

object-fit: cover; 启用缩放而不是图像拉伸。

Answer 3

给定高度假设 150px 给图像的包装（锚标签）。然后对于图像标签使用 max-width: 100%, height: auto, display: block

Answer 4

给图片div一个固定的高度，使用最大图片的高度偏好给图片的div设置一个固定的高度，这样就可以让所有的显示方式都一样。