どうしてもobject-fitが使いたい！簡単にIE・Edge対応する方法【CSS】

おはようございます！hgmです。

本日は、CSSで「object-fit」を使用する際のIE・Edgeに対応する方法について。

object-fit: cover; や、object-fit: contain;など、比率を維持したまま画像をトリミングしてくれる便利なプロパティー。

投稿などの動的な画像や膨大な数の画像を決まったサイズで切り抜くのにとても重宝しますよね！

しかし、Google ChromeやFirefoxは対応しているのですが、IE・Edgeでは対応していないのです。

そこで、IE・Edgeにも対応できる簡単な2つの方法をご紹介します！

jQueryライブラリー「object-fit-images」

objeft-fitのIE・Edge対応としてよく使用されている定番プラグイン。

下記リンクよりダウンロードできます。

https://github.com/bfred-it/object-fit-images

distフォルダのofi.min.jsのみダウンロードでOK！

ダウンロードしたJSは任意の場所に置き、読み込みましょう。

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

CSSにて任意のクラス名をつけ、obejct-fitに加え、font-familyをIE対応のために「font-family: ‘object-fit: cover’;」のように指定します。

/* 例 */
.cover{
  object-fit: cover;
  font-family: 'object-fit: cover';
}
.contain{
 object-fit: contain;
 font-family: 'object-fit: contain';
 }

スクリプトを呼び出します。

<script>
  $(function () {
    objectFitImages();
  });
</script>

あとは対応させたい画像にクラスをつければ対応完了です。

クラスなので、複数使用できて便利ですね。

jQueryライブラリーなしで対応

プラグイン無しで対応したい・・・という時は、下記コードペンを入れるだけで対応できます！※object-fit: cover;のみ。

Pawel Grzybekさんが作成したものです。

.js-boxのクラスを付与するだけで対応完了。軽量だしクラス名も決まっているので簡単ですね！

まとめ

CSSのみで対応できる方法もあるのですが複雑なため、今回はjQueryを使用し簡単に対応できる方法をご紹介しました。

色んなブラウザがあるのですべて対応するには難しいですが、Windowsを使用している方が多いため「object-fit」を使用する際は今回ご紹介したような対応が必要です。

とはいえ、使用しなくても良い環境になるのが一番ですが・・・😭

もしご存知なかった方は、ぜひ試してみてくだいね！