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

Question

我想创建像 Mobile gallery 这样的图片库。每个图像都应该在主容器内的方框中。

图像不应被拉伸(stretch)，而应最大程度地裁剪或剪辑。 现在我使用这段代码以宽高比拉伸(stretch)图像，

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

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

这是我想要的例子，

Answer 1

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

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