Within my application, users have the capability to upload images that are then displayed in a grid system. Due to their varying aspect ratios, it is not possible for them all to be the same size. Is there a way to keep the parent div the same size for all projects, despite the differing image sizes? Thank you.
Here is an example of 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>