object.fitは画像や動画のトリミングができる便利なプロパティですが、残念ながらIEやEdgeには対応していません。
IEやEdgeに対応させる方法として、「object-fit-images」か「fitie」というGithubに公開されているJavaScriptを利用する方法がよく知られていますが、今回僕のケースでは「object-fit-images」でもうまくいかず、「fitie」を試してみるとうまくいきました。
「object-fit-images」に関しては、もしかしたら僕のやり方が間違っていたのかもしれません。
fitieでobject-fitをIE/Edgeにも対応させる方法
「fitie」はGithub上に公開されていますので、まずはダウンロードします。
GitHub – jonathantneal/fitie: An object-fit polyfill for Internet Explorer
ダウンロードしたファイルの「dist」というディレクトリの中にある「fitie.js」をサーバー上（js用のディレクトリなど）にアップし、htmlの</body>直前などで次のように読み込むだけです。
<script src=”js/fitie.js”></script>
なお、srcはfitie.jsの置いてある場所を指定するようにしてください。
「fitie」をダウンロードして「fitie.js」をサーバー上に置く、その「fitie.js」を読み込む。たったのこれだけでobject-fitをIEやEdgeでも対応させることができます。
Leave a Comment