object-fitをつかって画像をボックスいっぱいに表示させる方法

コーディングなどをしていると、縦横比を維持したままそのボックスいっぱいに画像サイズを表示したい場合が多々あります。
こういう場合backgroundを使用すると比較的容易に実現できるのですが、CMSと組み合わせるなどするときに、imgタグを利用して実現したい場合があります。

今回はそういったときに使用できる「object-fit」というプロパティを紹介します。

画像をトリミングせず、ボックスに入る最大サイズで表示する

プロパティを見ればわかりますが、backgroundと同じような設定で可能ですね。

画像をトリミングして、ボックスにを埋める最大サイズで表示する

こちらもbackgroundと似たような設定で可能ですね。
ただし注意点があります。object-fitはIEやEdgeでは正しく動作しません。したがってレスポンシブコーディングでスマホ表示のコーディングなどで使用することをお勧めします。

参考にしてみてください。