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

Question

我想创建图片库，如移动图库。每个图像应位于主容器内的方框内。

图像不应被拉伸，而应最大限度地裁剪或剪裁。 现在我伸展的图像与使用此代码的纵横比，

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

它给我的各图像的最小化缩略图。但我想在中心剪裁或裁剪图像的方框内制作。

这里是我想要的例子，

Answer 1

这是我如何实现它的解决方案......它使长宽比，带来图像为中心，像我想要什么......

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