IEでobject-fitが効かない時の対処法

2020/12/19 2021/11/9

この記事はIE（Internet Explorer）でCSSのプロパティ「object-fit」が効かない時の対処法について書いています。

object-fitは画像(img)やvideoといった要素を、親要素の範囲内にどのように埋め込むかを指定できる便利なプロパティですが、残念ながら現時点でIEに対応していません。

以下でIEでもobject-fitを有効にできるライブラリを紹介するので参考にしてみてください。

Contents

IEでobject-fitが効かない時の対処法としては以下の２つのライブラリのどちらかを使うのがおすすめです。

ちなみに、fitieはjsファイルを読み込むだけで簡単なのですが、object-positionに対応していません。

object-positionも使用したい場合は、object-fit-imagesを使ってください。

fitieの使い方

fitieはJonathan Nealさんが公開されているobject-fit用ライブラリです。

以下のリンクから、fitie.jsをダウンロードしてください。

GitHub：fitie

「Code」という緑のボタンをクリックし「Download ZIP」からダウンロードできます。

<script src="./fitie.js"></script>

普通にHTMLファイルで読み込んでください。

上記は例なので、パスは自分でfitie.jsを置いたところにつなぎましょう。

fitie.jsはこれだけです！

ただし、前述した通り、object-positionも使用したいという場合は、次のobject-fit-images.jsを使いましょう。

object-fit-imagesはFedericoさんが公開されているobject-fit用ライブラリです。

先ほどのfitie.jsと同じように、以下のリンクからofi.jsをダウンロードしてください。

下記のような感じでJavaScriptファイルを読み込んでください。

<script src="./ofi.js"></script>

これもfitie.jsと同じですね。

ここから先がobject-fit-imagesで大事な設定です。

IEでobject-fitを有効にしたい画像にクラスを付けて、object-fitプロパティのほか、font-familyに以下のような記述してください。

<img src="./img.jpg" class="ofi">

<style>
  .ofi {
      object-fit: cover;
      font-family: 'object-fit: cover;';
  }
</style>

object-positionも併せて設定したい場合は以下のように記述します。

.ofi {
      object-fit: cover;
      object-position: left;
      font-family: 'object-fit: cover; object-position: left;';
}

以下のコードを書いてobject-fit-imagesのスクリプトを実行します。

objectFitImages();

これでIEでobject-fitが有効になります。

Internet Explorerのサポート終了が決まりましたが、僕の周りでバリバリIEを使っている人もいるので、できる限りのIE対応は必要だと思っています。

ぜひ参考にしてください。