Users have posted images from the database, but the issue arises when the images have different dimensions within the card.
https://i.sstatic.net/ktGqL.png
If we set fixed height and width, the image loses its original ratio.
https://i.sstatic.net/ao91a.png
However, I want the picture to maintain its original form while allowing its height or width to change within the card like this:
https://i.sstatic.net/HnKEM.png
{% for post in show_posts %}
<div class="col-md-6 col-lg-4 mb-4">
<div class="card listing-preview">
<img class="card-img-top" src="{{ post.photo.url }}" alt="">
<div class="card-body">
<div class="listing-heading text-center">
<h4 class="text-primary">{{ person.name }}</h4>
</div>
<hr>
<div class="row py-2 text-secondary">
<div class="col-12">
City: {{ post.city }}</div>
</div>
<div class="row py-2 text-secondary">
<div class="col-12">
Area: {{ post.area }}</div>
</div>
<hr>
<div class="row text-secondary pb-2">
<div class="col-12">
<i class="fas fa-clock"></i> {{ person.list_date timesince }}</div>
</div>
</div>
</div>
</div>
{% endfor %}