Scale image by centering while maintaining aspect ratio using CSS

Question

I want to create an image gallery like a mobile phone gallery. each image should be in a square box inside the main container.

The image should not stretch and not crop or clip. now i am stretching image with aspect ratio using this code,

img {
  max-width : 150px;
  max-height : 150px;
}

it gives me a reduced thumbnail of each image. but I want to do everything inside a square square with a clipped or cropped clip.

here is the example i want,

+3

Mohideen ibn Mohammed 03 june 17 at 19:09

1 answer

Mohideen ibn Mohammed · Accepted Answer · 2017-06-05T15:03:36+0000

Here is the solution how I achieved it ... it preserves the aspect ratio and brings the image to the center as if I want ...

.scale-image {
  object-fit: cover;
  width: 150px;
  height: 150px;
}