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

Question

我想像Mobile gallery一样创建图库.每个图像应位于主容器内的方框中.

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

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

它给了我每个图像最小化的缩略图.但我想制作所有内部方框,中心剪裁或裁剪图像.

这是我想要的例子,

Answer 1

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

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