画像をトリミングしてくれるCSS【object-fit】をIEにも対応させる方法

例えばギャラリー一覧ページなどで、サムネイルサイズがバラバラだと格好がつかないので、全部同じサイズで揃えたいときなんかに、便利な【object-fit】というCSSがありますが、IEに対応していません。

以下サンプルのように、【object-fit-images（github）】を読み込んで（サンプルではCDNから読み込んでいます）、適用するクラスを決めてスクリプトを記述し、該当の画像にクラスを設定するだけです。

※【注意】ローカルで以下を試しても動きません。サーバーにアップするか、XAMPPなどを使用しましょう。この記事をアップするためにローカルで検証してて全然IEで適用されない！となっていました。

↓object-fitをIE11に対応させたサンプル

<div style="border:1px solid #ccc;width: 250px; height: 150px;">
  <img class="fit__img" src="https://oksho.net/wp/wp-content/uploads/2019/10/bingocard-18.png" />
</div>
<style>
  .fit__img{
    object-fit: cover;
    font-family: 'object-fit: cover;';
    width:100%;height:100%;
  }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"></script>
<script>
  objectFitImages('.fit__img');
</script>

ワードプレスなら、functions.phpに任意の画像サイズ生成を入れればいいだけなんですけどね･･･。