はじめに
アバターなどユーザーがアップロードした画像を特定の領域内に表示したいというケースがフロントエンドの実装をやっているとちょこちょこあります。
そのような場合は、object-fitという素晴らしいCSSプロパティがあるので、これだけ使っていれば大体事足りるのですが、残念なことにIEはこのobject-fitプロパティに対応していません。
参考 Can I use: object-fit/object-position
すでにIEは非推奨ブラウザなので対応しないとできれば良いのですが、案件によってはIE11対応を求められることもあります。そういった場合にどうやったらobject-fitみたいな実装をIEでもできるのかを本記事に記載します。
対応内容
同じような悩みを抱えていたエンジニアが多かったようで、素晴らしい先人がobject-fit-imagesというライブラリですでにIEのobject-fitのPolifil対応をしてくれているので、今回はこちらを使用します。
yarn add object-fit-imagesでライブラリを追加- 下記のコードのように
object-fitを利用したいimgタグにfont-familyの記述を追加します
.your-favorite-image{object-fit:contain;/* ← これでIE以外のブラウザは対応可能*/font-family:'object-fit: contain;';/* ←の記載をIEのPolifil用に追加*/}3.</body>の前か、DOMの読み込みが終わったタイミングでobjectFitImages()を呼び出します
(objectFitImagesにセレクタを渡すことでPolifilの対象を指定することもできます)
=> 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で公開したいなと思いました。