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

Question

我想创建类似于移动图库的图片库。每个图像都应该在主容器内的方框中。

不应拉伸图像，而应最大程度地裁剪或剪辑图像。 现在我使用这段代码拉伸具有纵横比的图像，

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

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

这是我想要的例子，

Answer 1

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

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