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

问题描述

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

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

<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

解决方法

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

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

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

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

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

,

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

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