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.
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>