CSSのobject-fitプロパティはIE11に対応していませんが、どうしても使用したいときはJavaScriptのプラグインの『object-fit-images』を使うと実現できました。

CDNで読み込む方法もありますが、今回はnpmパッケージを使用してインストールする方法でやっていきます。

環境

node.js v12.16.1
yarn 1.22.4

object-fit-imagesのインストール

下記のコマンドでインストールします。
npmコマンドでも大丈夫ですが今回は省略します。

yarn add object-fit-images

設定

JavaScript

jsファイルに下記のように入力して保存します。

import objectFitImages from "object-fit-images";

objectFitImages(".js-ofi-img");

CSS

JSで設定したjs-ofi-imgに対してスタイルを設定します。

.js-ofi-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  font-family: "object-fit: cover;";
}

公式を見てもらえれば分かると思いますが、必要な部分はobject-fit: cover;とfont-family: "object-fit: cover;";です。

保守性を考えると切り抜きサイズの指定とobject-fitの指定はクラスを分けるほうがいいかと思います。

あとはこのjs-ofi-imgクラスをimg要素に充てるだけでOKです。
IE11で見てもちゃんと切り抜かれていました！

最後に

CSSだけで簡易的に画像切り抜きができるのは便利ですよね！
それにしてもはやくIEの考慮をしなくていい世界になってほしいものです。

それではまた〜！