How do I align different size images - php

Question

I'm trying to write a page with different size images but can't figure out how to align them properly.
This is how the web-page looks:
https://i.imgur.com/Li17CMl.jpg
I have added bootstrap img-fluid for responsiveness. If i set fixed height images wont scale down properly on smaller screens.
I cleaned some non related data with '...' just to make code look cleaner.
My current code:
foreach(row...) : ?>
<div class="col-md-6" style="padding...">
<div class="card">
<div class="card-body" style="padding...">
<a href="">
<div>
<img class="img-fluid" style="width: 100%;" src="row->image..." alt="">
</div>
<div>
<h5> title </h1>
<h6> date </h6>
</div>
</a>
</div> <!-- /card body -->
</div> <!-- /card -->
</div> <!-- /col-6 -->
<?php endforeach; ?>
I'm hoping that images will scale down on smaller screens.

Answer 1

TL:DR object-fit: cover; will do the trick.
Solution 1 - FIXED HEIGHT
with this solution you have to set value for the height of the images: the photos won't stretch but the ratio will be different for each screen
.img-fluid {
height: 200px; /* insert here your desired height*/
object-fit:cover;
}
Solution 2 - REAL FLUID
this solution is a little trickier but the photos will have always the ratio you will choose.
.card-body a div:first-child {
position: relative;
width: 100%;
height: 0;
padding-top: 60%; /*insert value for the desired ratio. ie: 60% -> 10/6 image*/
}
.img-fluid {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}

Answer 2

Please use below code:
.img-card img{width:100%;height:300px;object-fit:cover;}
.img-card{margin-bottom:15px;margin-top:15px;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-6">
<div class="img-card">
<img src="https://i.ytimg.com/vi/VDNd4KjELkU/maxresdefault.jpg" />
</div>
</div>
<div class="col-6">
<div class="img-card">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0f/5e/fc/f5/inkaya-cinari.jpg" />
</div>
</div>
<div class="col-6">
<div class="img-card">
<img src="https://thumbs.dreamstime.com/z/scenery-5680647.jpg" />
</div>
</div>
<div class="col-6">
<div class="img-card">
<img src="https://cdn.pixabay.com/photo/2015/11/11/03/47/evening-1038148__340.jpg" />
</div>
</div>
</div>
</div>