Html & django resize img-parent div to one size

In my application I let the user upload images. They are all displayed in a grid system. But because of there different aspect ratio it´s of course not possible that they have the same size. Are there any possibilities although the images aren´t the same size but let the parent-div be the same size for all projects. Thanks

here is my template

 <div class="container">
        <div class="row">
            {% for project in projects %}
              <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="border border-dark">
                    <img class="card-img-top" src="{{project.featured_images.url}}" alt="Card image cap">
                    <h5 class="text-center">{{project.title}}</h5>
                  </a>
                    <ul class="list-group list-group-horizontal">
                      <li class="list-group-item flex-fill">{{project.price}} €</li>
                      <li class="list-group-item flex-fill">{{project.location}}</li>
                    </ul>
                  </div>
                </div>
                
            {% endfor %}
        </div>
      </div>

enter image description here

You can simply add a little bit of CSS. Add a certain height of the image (card-img-top) and add "object-fit: contain". like this:

.card-img-top{
height:300px;
object-fit: contain;}

if you want that the image always start from top and not from center use "object-position:top".

.card-img-top{
height:300px;
object-fit: contain;
object-position: top;}
Back to Top