0

以下问题：我有一些带有图片的 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排列的。

谢谢呜呜！:)

截屏

4

2 回答 2

2

您可以使用 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 文件中的类，则可以更新它。

于 2021-05-02T13:11:23.237 回答
0

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

<img class="card-img-top city-img" height="200px" src="..." alt="New York City">
于 2021-05-02T11:29:31.447 回答