IEやEdgeにもobject-fitを対応させる方法

以前「object-fitをつかって画像をボックスいっぱいに表示させる方法」でobject-fitを紹介いたしました。私も非常に便利でよく使っているプロパティーの一つです。
そして使えば使うほど、PC向けにもこのプロパティーは使用したくなります。
そこで問題になるのがInternet Explorer（以下IE）とEdgeです。

object-fit-imagesを使用して対応する

先述のブラウザはobject-fitに対応していません。そこで「object-fit-images」というライブラリを使用します。
まずは上記のページにアクセスして緑色の「Clone or download」ボタンを押してライブラリをダウンロードしてください。

HTML

まずはjQueryの呼び出しの後に、ライブラリを呼び出します。
このライブラリは「dist」フォルダの中に格納されています。

<script src="/js/ofi.js"></script>

次に、スクリプトを実行します。

<script>
objectFitImages();
</script>

上記ではすべての画像を対象に処理がされます。
特定のクラスのみに処理を実行する場合は以下のように設定します。

//imgタグ
<img class="hoge" src="/photo.jpg">

//スクリプトの実行
<script>
objectFitImages('.hoge');
</script>

これでHTMLの準備は完了です。

CSS

次にスタイルの設定です。スタイルは以下のように設定します。

.hoge {
object-fit: cover;
font-family: 'object-fit: cover;'
}

これでobject-fitをIEやEdgeにも適応させることができます。
参考にしてみてください。