How to make my images fir properly in Square Shape box?

so i was trying out this Instagram template lookalike from code pen, and tried my own images but am having problem, as they don’t fit properly .

the width and height of the 3 images respectively:

182 x 320

320 x 285

320 x 254

The CSS file with Html:

https://codepen.io/GeorgePark/pen/VXrwOP

EDIT: after using object-fit: contain;

Now the good thing is they fit , but how can i get square like shapes, (same as Instagram does it)

Example : https://www.instagram.com/leomessi/?hl=en

You can use the width and hight and make them equal making them squares.

1 Like