如何在 Bootstrap Card 中使用 CSS 调整图像大小和裁剪图像？答案

【问题标题】：How to resize and crop an image with CSS, inside a Bootstrap Card?如何在 Bootstrap Card 中使用 CSS 调整图像大小和裁剪图像？
【发布时间】：2021-07-25 02:08:47
【问题描述】：

以下问题：我有一些带有图片的 Bootstrap 卡片元素，有些图片有不同的尺寸/比例，比如中间的那张（见附件截图）。因此我的卡片元素不在一行中。这不是很好。

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

<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

【问题讨论】：

标签： html css bootstrap-cards

【解决方案1】：

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

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

在上面的示例中，所有图像的高度将是视口宽度的 15%。这可以是任何你喜欢的...500px、10vh 等。

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

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

【讨论】：

Ps，这不会扭曲您的图像或弄乱纵横比。此外，这将确保更高或更宽的图像都很好地适合。如果图像超高或超宽，则不太方便，因为会裁剪更多图像。
这正是我想要的。非常感谢，@AyyCee！ :)

【解决方案2】：

给图片标签一个固定的高度，这样小图片就会自动展开。

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

【讨论】：