How to adjust rectangular images to show up as a square in an instagram-like grid of images without losing page responsiveness

Question

If you guys take a look at the code, when I add squared images (first row), the grid will fit perfectly just like instagram. I want to make different shaped images fits in this same squared width and height when I add them (second row).

The problem is, if I just try to make it a square by changing the width and height of the .column > img selector from 100% to 300px for example, the images won't resize in page responsiveness and everything becomes a mess of images overlaying each other.

body {
    font-family: "Open Sans", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

.container {
    width: 100%;
    max-width: 930px;
    margin-right: auto;
    margin-left: auto;
}

.column {
    width: 33.33%;
    margin-right: 30px;
}

.row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 28px;
}

.column>img {
    width: 100%;
    height: 100%;
}

@media (max-width: 760px) {
    .row {
        margin-bottom: 3px;
    }

    .column {
        margin-right: 3px;
    }
}

@media (max-width: 450px) {
    .row {
        flex-direction: column;
        justify-content: center;
    }

    .column {
        width: 100%;
        margin-bottom: 6px;
    }
}

<div class="container">

   <div class="row">
       <div class="column">
           <img src="https://images.unsplash.com/photo-1498471731312-b6d2b8280c61?w=500&h=500&fit=crop">
       </div>
       <div class="column">
           <img src="https://images.unsplash.com/photo-1515023115689-589c33041d3c?w=500&h=500&fit=crop">
       </div>
       <div class="column">
           <img src="https://images.unsplash.com/photo-1502630859934-b3b41d18206c?w=500&h=500&fit=crop">
       </div>
   </div>

   <div class="row">
       <div class="column">
           <img src="https://images.unsplash.com/photo-1523354177913-be035fcee55e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80">
       </div>
       <div class="column">
           <img src="https://images.unsplash.com/photo-1563281746-48bb478e9b2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80">
       </div>
       <div class="column">
           <img src="https://images.unsplash.com/photo-1563170446-9c3c0622d8a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80">
       </div>
   </div>
</div>

Is there a way to make all images a square and at the same time keep the responsiveness of the width and height when resizing the page? Thanks in advance.

Answer 1

I made a solution. In my solution I've used object-fit property to resize image. Check it. Hope it will be helpful to you.

body {
    font-family: "Open Sans", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

.container {
    width: 100%;
    max-width: 930px;
    margin-right: auto;
    margin-left: auto;
}

.column {
    width: 33.33vw; /*These properties are changed*/
    height: 33.33vw; /*These properties are changed*/
    margin-right: 30px;
}

.row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 28px;
}

.column>img {
    width: 33.33vw; /*These properties are changed*/
    height: 33.33vw; /*These properties are changed*/
    object-fit: cover; /*These properties are changed*/
}

@media (max-width: 760px) {
    .row {
        margin-bottom: 3px;
    }

    .column {
        margin-right: 3px;
    }
}

@media (max-width: 450px) {
    .row {
        flex-direction: column;
        justify-content: center;
    }

    .column {
        width: 100%;
        margin-bottom: 6px;
    }
}

<div class="container">

   <div class="row">
       <div class="column">
           <img src="https://images.unsplash.com/photo-1498471731312-b6d2b8280c61?w=500&h=500&fit=crop">
       </div>
       <div class="column">
           <img src="https://images.unsplash.com/photo-1515023115689-589c33041d3c?w=500&h=500&fit=crop">
       </div>
       <div class="column">
           <img src="https://images.unsplash.com/photo-1502630859934-b3b41d18206c?w=500&h=500&fit=crop">
       </div>
   </div>

   <div class="row">
       <div class="column">
           <img src="https://images.unsplash.com/photo-1523354177913-be035fcee55e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80">
       </div>
       <div class="column">
           <img src="https://images.unsplash.com/photo-1563281746-48bb478e9b2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80">
       </div>
       <div class="column">
           <img src="https://images.unsplash.com/photo-1563170446-9c3c0622d8a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80">
       </div>
   </div>
</div>