0

I'm using Boostrap to build a website whose purpose is to display a list of items. Each item is a card and has an image attribute. The problem is that the image of different items can have very different size. This results in some card having a lot of blank space because the image is small in comparison to other images. What I want is having a standart image size so all the images are automatically resized to have the same size. Here is my code :

<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>

I have looked at similar topics and tried modifying the css like this :

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

But it changes nothing. I would greatly appreciate some help.

Thanks in advance !

Julien Mertz
  • 465
  • 2
  • 8
  • 22
  • 1
    Is [this](https://stackoverflow.com/questions/37287153/how-to-get-images-in-bootstraps-card-to-be-the-same-height-width) fix your problem? – awran5 Feb 29 '20 at 15:30
  • Yes thank you ! The first answer with css doesn't work for me but the second does – Julien Mertz Feb 29 '20 at 16:47

0 Answers0