Html 通过使用CSS保持纵横比，使用中心裁剪缩放图像

我想创建像手机画廊一样的图像画廊。每个图像应放在主容器内的方形框中

图像不应拉伸，而应最大限度地进行裁剪或剪裁。 现在我用这个代码用纵横比拉伸图像

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

它为我提供了每个图像的最小化缩略图。但我想让所有内部方形框与中心剪辑或裁剪图像

这是我想要的例子，

---

以下是我如何实现这一目标的解决方案。。。它保持了纵横比，并把图像像我想要的那样放在中心

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

---

object-fit

使用JS polyfill，适用于较旧的浏览器，或

背景尺寸

…谢谢@CBroe object-fit cover可以满足我的需要