How do I maintain the same height and proportions of images?
Setting a specific height like 70vh achieves the desired height but distorts image proportions: https://i.sstatic.net/8eJq2.jpg
On the other hand, using height: auto; creates responsive and proportional images but with varying heights: https://i.sstatic.net/7CNfZ.png
Is there a way to combine both methods to have consistent height and maintain image proportions?
HTML:
<main>
<div class="container-fluid">
<div class="row first-row justify-content-center">
<div class="flex-wrap col col-xlg-2 col-lg-3 col-12 col-md-6">
<a href="img/projects/home/1.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/test2.jpg" class="img-fluid img"></a>
</div>
<div class="flex-wrap col-6 col-xlg-8 col-lg-6 col-12 col-md-6">
<a href="img/projects/home/3.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/test1.jpg" class="img-fluid img"></a>
</div>
<div class="flex-wrap col col-xlg-2 col-lg-3 col-12 col-md-6">
<a href="img/projects/home/2.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/test2.jpg" class="img-fluid img"></a>
</div>
</div>
CSS:
.first-row div img
{
max-width: 100%;
height: auto;
}