Question

我正在使用Boostrap构建一个网站，其目的是显示项目列表。每个项目都是一张卡片，并具有图像属性。问题在于不同项目的图像可能具有非常不同的大小。由于与其他图像相比，该图像较小，因此这导致某些卡具有很多空白空间。我想要的是标准图像大小，因此所有图像都会自动调整大小以具有相同的大小。这是我的代码：

<div class="col-lg-6 col-md-6 col-sm-6 mb-4 pb-2">
  <div class="list-card bg-white h-100 rounded overflow-hidden position-relative shadow-sm">
     <div class="list-card-image">
       <div class="star position-absolute" ><span class="badge badge-success" style="font-size: 150%">Cuisiné par {{ plat.chef }}</span></div>
          <a href="{% url 'display' plat.id %}">
          <img src="{{ plat.photo.url }}" class="img-fluid item-img" width="100%" height="100%"> 
          </a>
     </div>
     <div class="p-3 position-relative">
                        SOME CODE
     </div>
  </div>
</div>

我看过类似的主题，并试图像这样修改css：

.list-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

但是它什么也没有改变。我将不胜感激。

提前谢谢！

如何使Bootstrap的卡片图像大小相同？

0 个答案: