CSSを使用してアスペクト比を維持してセンタークロップを使用して画像を縮尺する

Question

モバイルギャラリーのような画像ギャラリーを作成したいと思います。各画像は、メインコンテナ内の四角いボックス内にある必要があります。

画像を切り抜かずに伸ばしたり、最大でクリップしたりしないでください。 は、今私はそれが私に各画像の最小化サムネイルを与える

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

、このコードを使用してアスペクト比を有する画像を伸ばします。しかし、私はすべての四角いボックスを中央で切り取ったり、切り取ったりしてイメージにしたいと思っています。ここ

は...それはアスペクト比を維持し、私が欲しいものなどの中央にイメージを持って来る...ここ

Answer 1

が、私はそれを達成する方法ソリューションである、私が欲しいの例である

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