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

使用以下CSS

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

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

Answer 2

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

您可以添加一些特殊的类，例如，在使用card的行或更高级别，以修改该参数。这样的事情。

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

还用div包装class="flex-fill"的链接图像，使链接图像变大。

查看代码段，我在行中添加了特殊类，并设置了不同的高度来链接图像以说明这一想法。

更新。使链接图像居中

使用弹性框播放。例如：添加到div并包装<a>类d-flex，它将使该div带有display: flex。然后，您可以向该div类添加justify-content-center和align-items-center，但是我更喜欢在您的情况下向m-auto添加类<a>，它得到了margin: auto，使元素与flex父元素集中。查看摘要。

.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 3

给定修复高度，假设图像（锚标签）的包装高度为150px。然后为图片广告代码使用最大宽度：100％，高度：自动，显示：阻止

Answer 4

为图像div设置固定的高度，使用最大图像的高度首选项将固定高度设置为图像的潜水高度，这将使所有人以相同的方式显示。

引导程序-使用高度相同的图像制作卡片

4 个答案: