Html & django изменение размера img-parent div до одного размера

В моем приложении я позволяю пользователю загружать изображения. Все они отображаются в системе сетки. Но из-за разного соотношения сторон, конечно, невозможно, чтобы они имели одинаковый размер. Есть ли возможность сделать так, чтобы изображения не были одинакового размера, но чтобы родительский div был одинакового размера для всех проектов. Спасибо

вот мой шаблон

 <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

Вы можете просто добавить немного CSS. Добавьте определенную высоту изображения (card-img-top) и добавьте "object-fit: contain". вот так:

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

Если вы хотите, чтобы изображение всегда начиналось сверху, а не из центра, используйте "object-position:top".

.card-img-top{
height:300px;
object-fit: contain;
object-position: top;}
Вернуться на верх