Масштабирование картинки в блоке без изменения соотношения сторон

Помогите реализовать галерею на css как показано на фото нужны фиксированные блоки картинок с миниатюрами фотографии в каждом квадрате без потери соотношения сторон. (на фото меняется масштаб картинки)

ниже то что имеется на данный момент:

<div class="row">
<div class="column">
<img class="preview-img" src="img/img1.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img class="preview-img" src="img/img2.jpeg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img class="preview-img" src="img/img3.jpeg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img class="preview-img" src="img/img5.png" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>


.row{
text-align: -webkit-center;
}
.column {
float: left;
width: 25%;
}
.preview-img{
border: 1px solid gray;
width: 500px;
height: auto;
position: relative;