正方形の切り抜かれた画像を反応的にする方法

Question

私は、サイズがわずかに異なる画像のセットを切り抜いて、一致するサイズの四角にして、それを反応させようとしています。私は画像をdivに入れて画像を背景画像にすることで画像を切り抜くことができますが、高さ：autoを使用して応答性の高い画像を取得しようとするとdivが崩壊します。

これは私が私の問題を見つけることができる最も近いものです： How to make centre cropped image responsive?

が、イメージはそもそも縦向きである場合には、このソリューションは、正方形の収穫を得ることができます。さらに、サイズに応じてすべてのイメージを手作業で作っていなければなりません。

私が探しているのは、すべての画像を同じサイズの四角形に切り抜いて、それに応じて拡大縮小するCSSハックです。 CSSのためのこの希望的な考えですか？

Answer 1

background-size：coverを試しましたか？背景画像をコンテナのサイズに調整します。

background-position: center bottom; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center;