css - 画像が奇妙に広がっているfirefox

Question

私は現在imgタグのCSSをテストしています。クロムでは見栄えが良いですが、Firefoxで見たときに最後の画像が伸びています。私は何が間違っているのか分かりません。以下は、ChromeとFirefoxで表示したときの違いを確認できるjsfiddleです。

.thumbContainer img{ 
    margin: 0 auto; 
    max-width:100%; 
    max-height:100%; 
    object-position: 50% 50%; 
    object-fit: fill !important; 
} 

Answer 1

あなたが正式にサポートされていない-moz-boxまたは-webkit-boxなどのブラウザ固有のCSSプロパティを使用しているので、これは、発生します。これは、さまざまなブラウザで異なる動作を引き起こす可能性があります。ブラウザがそのような要素を表示する方法を決定するためで、Firefoxでは正しい結果が得られません。私の一般的なアドバイスは：古いCSSのCSS機能を有効にする必要がある場合を除いて、プレフィックス付きCSSのプロパティを使用しないでください。おそらく、あなたの問題のための別のアプローチがflexboxであるかもしれません。