0

我正在使用 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;
}

但它什么也没改变。我将不胜感激一些帮助。

提前致谢 ！

4

0 回答 0