Scale Image with Center crop by maintaining Aspect Ratio using CSS

Question

I want to create Image gallery like Mobile gallery . each Image should be in square box inside main container.

Image shouldn't be stretched instead crop or clip at maximum. now i stretch image with aspect ratio using this code,

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

it gives me minimized thumbnail of each image. but i want to make all inside square box with center clipped or cropped image.

here is the example i want,

Answer 1

Here is the solution how i achieved it... it keeps aspect ratio and bring image into center as like what i want...

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