object-fitはIEに対応していなかった

object-fit が IE 未対応だった

昨日の投稿で object-fit の話を書いて意気揚々と実装したものの、object-fit が IE に対応していなかった。

IE 対応指針はプロダクトによって異なると思うけど弊プロダクトは IE が消えるまでは IE でも動いてほしいという状態を維持しようとしているので、object-fit は使わないで別の手段で実装することにした。

雑にググって調べてみたらいくつか方法があるっぽかった。

どうやら IE11 に対応させるための Polyfill のようなライブラリがあるらしい。

どうやら fitie のほうが簡単に使えるようだが、object-position プロパティに対応していないため object-position を使う場合は object-fit-images を使う必要があるらしい。

Nuxt でプロダクトを作っているのだが、

IE のために管理するライブラリを増やす必要がある
object-fit-images も fitie も実装が Nuxt 上でいい感じに動作するか分からない ↓
- fitie.js が多方面に影響していた話｜空城誠｜ note

ということで CSS で対応することに。

v-bind:styleで画像パスを background-image として読み込み、background-position や background-size などで調整してobject-fit: contain;と同等の表示にした。

IE 対応をしなくてよくなったときまで耐えてくれと声をかけながら img タグのobject-fit: contain;を消しました。というか background-image に指定したので img タグごと消しました。かなしいね。

一応 object-fit の実装の痕跡をプルリクエストに残したので、どんな書き方するか思い出したいときに引っ張ってこれるようにはしておく。