如何在 Bootstrap 卡片内使用 CSS 调整图像大小和裁剪图像？

Question

以下问题：我有一些 Bootstrap 个带图片的卡片元素，有些图片有不同的 sizes/ratios，比如中间的那个（见附件截图）。因此我的卡片元素不在一排。不太好看。

现在我想将这些图像调整为其他图像的高度，并裁剪溢出部分。我怎么做？这是我的一张卡片的代码片段...

<div id="cities">
  <div class="city">
    <div class="card">
      <div class="city-img-container">
        <img class="card-img-top city-img" src="..." alt="New York City">
      </div>
      <div class="card-body">
        <h5 class="card-title"><b>Name: </b>New York City</h5>
        <p class="card-text"><b>Land: </b>USA<br>
            <b>Spitzname: </b>The Big Apple</p>
        <div class="city-bottom-content">
            <a href="#/city?id=35" class="btn btn-primary" data-id="35">
              <i class="bi bi-arrow-right"></i>
            </a>
            <button data-id="35" class="is-favorite">
              <i class="bi bi-heart-fill"></i> 
            </button>
        </div>
    </div>
  </div>

  <div class="city">
    ...
  </div>
</div>

PS：#cities里面的卡片元素是用grid和grid-template-columns排列的。

谢谢呜呜！ :)

screenshot

Answer 1

为图片标签指定一个固定高度，以便小图片自动展开。

<img class="card-img-top city-img" height="200px" src="..." alt="New York City">

Answer 2

您可以使用 object-fit 使所有图像的高度（和宽度）相同。

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

在上面的示例中，所有图像的高度都是视口宽度的 15%。这可以随心所欲...500px、10vh 等

object-fit: cover; 可能会隐藏部分图像 - 但也许您可以实现一种在单击时以全尺寸查看图像的方法？无论哪种方式，这都是保持卡片相当统一的好方法。

请注意，您只是对现有 Bootstrap class .card-img-top 进行了一些调整。您可以将此 CSS 包含在您的 HTML 文件中，在您的 CSS 文件中，或者如果您下载了 Bootstrap 文件中的 class。

如何在 Bootstrap 卡片内使用 CSS 调整图像大小和裁剪图像？

How to resize and crop an image with CSS, inside a Bootstrap Card?

html

css

bootstrap-cards