通过使用CSS保持纵横比来缩放具有中心裁剪的图像

Question

我想像移动图库一样创建图库。每个图像应位于主容器内的方框中。

不应拉伸​​图像，而是最多裁剪或剪裁。 现在我使用此代码拉伸具有宽高比的图像，

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

它为我提供了每张图片最小化的缩略图。但我想制作所有内部方框，中心剪裁或裁剪图像。

这是我想要的例子，

Answer 1

以下是我如何实现它的解决方案...它保持纵横比并将图像置于中心，就像我想要的那样......

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