IEでもCSSによる画像のトリミングをしたい (object-fitのIE11対応)

はじめに

アバターなどユーザーがアップロードした画像を特定の領域内に表示したいというケースがフロントエンドの実装をやっているとちょこちょこあります。

そのような場合は、object-fitという素晴らしいCSSプロパティがあるので、これだけ使っていれば大体事足りるのですが、残念なことにIEはこのobject-fitプロパティに対応していません。

参考 Can I use: object-fit/object-position

すでにIEは非推奨ブラウザなので対応しないとできれば良いのですが、案件によってはIE11対応を求められることもあります。そういった場合にどうやったらobject-fitみたいな実装をIEでもできるのかを本記事に記載します。

対応内容

同じような悩みを抱えていたエンジニアが多かったようで、素晴らしい先人がobject-fit-imagesというライブラリですでにIEのobject-fitのPolyfill対応をしてくれているので、今回はこちらを使用します。

参考： object-fit-images

1. yarn add object-fit-imagesでライブラリを追加
2. 下記のコードのようにobject-fitを利用したいimgタグにfont-familyの記述を追加します

.your-favorite-image {
    object-fit: contain;/* ← これでIE以外のブラウザは対応可能*/
    font-family: 'object-fit: contain;';/* ←の記載をIEのPolyfil用に追加*/
}

3.</body>の前か、DOMの読み込みが終わったタイミングでobjectFitImages()を呼び出します
(objectFitImagesにセレクタを渡すことでPolyfilの対象を指定することもできます)

=> background-imageなどで'object-fit相当の表現ができていることを確認できます。

補足事項

1.デフォルトの挙動
object-fit-imagesはデフォルトではすべてのimgタグを対象にします

2.objectFitImagesの呼び出しのタイミング
object-fit-imagesはobject-fitのターゲットとなるElementのsrc属性 / srcset属性を読み取って処理を行います。
そのため、React / Vue / jQueryなど動的にDOMを生成する場合はsrc属性 / srcset属性が反映されたあとにobjectFitImagesの呼び出しをする必要があります。

最後に

DOMを動的に生成している場合は注意が必要ですが、IEでの画像対応どうしようという場合にこのライブラリを利用すると少ないコード量で実装できるので助かりました。

自分もこういう痒いところに手が届くライブラリをOSSで公開したいなと思いました。