Есть 4 картинки разного размера:
HTML
<div class="row img-gallery">
<div class="col-md-3 col-12">
<img src="img-1.webp" alt="Картинка 1" />
</div>
<div class="col-md-3 col-12">
<img src="img-2.webp" alt="Картинка 2" />
</div>
<div class="col-md-3 col-12">
<img src="img-3.webp" alt="Картинка 3" />
</div>
<div class="col-md-3 col-12">
<img src="img-4.webp" alt="Картинка 4" />
</div>
</div>
CSS
.img-gallery div {
overflow: hidden;
height: 200px;
}
.img-gallery img {
width: 100%; height: 100%; object-fit: cover;
}
Получаем:
Свойство object-fit имеет несколько значений:
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
наглядно можно посмотреть по ссылке https://developer.mozilla.org/ru/docs/Web/CSS/object-fit