CSSのobject-fitをIEにも対応できるようにする

object-fit-imagesというJavaScriptファイルを用いて実現します。

1.下記のサイトへアクセスする
GitHub - bfred-it/object-fit-images: 🗻 Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari, ...
2.右側の緑の『Clone or download』をクリックする
3.『Download ZIP』をクリックする
4.ダウンロードした『object-fit-images-master.zip』を解凍する
5.dist/ofi.min.jsをコピペし、JavaScriptファイルを置いている場所に設置する。
6.画像を表示する場所に、object-fit-imagesのJavaScriptファイルを読み込ませ、引数に任意のclass属性を指定したobjectFitImagesを実行する。

    <!-- headタグに追加しておく -->
    <script src="ofi.min.js"></script>
    <!-- </body>タグ直前に設置しておく -->
    <script>
      objectFitImages('img.sample');
    </script>

7.任意のclass属性(今回は.sample)に必要な記述を行う。

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

8.object-fitさせたい画像に、class属性を指定する。

<img src="test.jpg" class="sample">

参考リンク
IEやEdgeにもobject-fitを対応させる方法｜株式会社ゼロワンアース
【CSS】object-fitが効かない・・IEやEdgeにも対応できる「object-fit-images」ライブラリ | ホームページ制作 大阪｜株式会社GreenHill
object-fitとobject-positionをIEやEdgeでも動かす。
object-fit - CSS: カスケーディングスタイルシート | MDN