最小の寸法を持つdivの中心に画像が含まれています

Question

小さな画像の中央に大きな画像があります。フィードに掲載されている画像のサイズに関係なく、正確に中央に配置するにはthisという参照を付けました。

1つの問題がありますが、高さまたは幅（投稿された各画像とは異なります）の最小寸法が必要ですが、divに一致するようにしてください。オーバーフローは、より大きな次元で隠されるべきです。

最大高さまたは最大幅を使用しても、反対の寸法が固定されるわけではありません。 JavaScriptが必要な場合、私はそのルートを取る。しかし、魔法のCSSソリューションがあるのか​​不思議です。

私が今までに持っていたコードは、水平に完全に中央に位置する景色イメージに適合し、divの上部と下部に並んでいます。しかし、ポートレイト画像が掲示されている場合は、高さに合わせて画像が縮小され、両面に隙間が残されます。

私は高さ：100％を削除しますが、それを行うと水平方向にねじ込みます。

.photo { 
    position:relative; 
    overflow:hidden; 
    text-align:center; 
} 

.photo img { 
    position:absolute; 
    height:100%; 
    top: -9999px; 
    bottom: -9999px; 
    left: -9999px; 
    right: -9999px; 
    margin:auto auto; 
} 

Answer 1

非常に簡単な解決策で動作するようになった！高さと幅を100％に設定しなければなりませんでしたが、直感的ではありませんでした。 object-fit値 "cover"を指定すると、画像のオーバーフローが自動的にトリミングされます。

などだけFF36の+、Chrome31 +、

.photo { 
    position:relative; 
    overflow:hidden; 
    text-align:center; 
} 

.photo img { 
    position:absolute; 
    object-fit:cover; 
    height:100%; 
    width:100%; 
    top: -9999px; 
    bottom: -9999px; 
    left: -9999px; 
    right: -9999px; 
    margin:auto auto; 
}