30Dec2018

【CSS IE対策】object-fit非対応のIE11用にJSファイルで対策

画像のトリミング表示などに大活躍のobject-fitプロパティ。残念ながらIE11は対応していないためそのままでは利用できません。今回はIE11用にobject-fitの対策を行えるJSファイルの紹介と設定方法を解説します。

この記事は約分で読めます。（文字）

object-fit非対応のIE11

object-fitは要素のコンテンツボックス内で画像をコントロールしトリミング等の効果を簡単に表現できるCSSプロパティです。とても使い勝手が良く画像を全面利用する時などによく利用されています。

特にobject-fitの『contain』や『cover』設定は画像の縦横比を保ったまま要素のコンテンツボックス内に合わせて自動調整してくれますのでレスポンシブデザインとも相性が良く手放すことができないCSSプロパティとなりました。

ただ、残念なことにobject-fitはIEで非対応となっています。最新のIE11でも対応されていないためIEではそのまま利用することができません。そのため何かしらの対応に迫られることになります。

IEではobject-fit非対応のため要素のコンテンツボックス内で画像がコントロールされません。object-fitを指定しているのに画像が縦長や、横長に調整され縦横比が狂った状態で表示されます。

既出の対応方法がいろいろありますが今回はその中でも簡単に対応できるJSファイルを使った対策方法を解説です。

対策に利用するJSファイルは『object-fit-images』です。

『object-fit-images』を使った対策はとても簡単です。下記2行のコードを任意の場所にペーストするだけで対策が完了します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js"></script>

<script>objectFitImages();</script>

Note

ページ表示速度の高速化対策やSEOを考慮してJSファイルの読み込みを遅延させる場合は

</body>

タグの直前あたりがオススメです。

後は『object-fit-images』を適用したいセレクターに対して次のように記述します。

font-family内の『object-fit』の値は、通常の『object-fit』の値と揃えておいてください。

object-fitの設定値が『cover』の場合

img {

    ・

    ・

    ・

    object-fit: cover;

    /* IE対策 */

	font-family: 'object-fit: cover;';

}

対策後IEで表示を確認してみましょう。正しく設定できていればobject-fitの指定内容が適用されているはずです。

object-fitはレスポンシブデザインにおいて切り離すことができない重要なCSSプロパティとなりました。IEで非対応ですがシェアがそれなりにあるため切り捨てることもできません。

今回の『object-fit-images』を利用した対策を行っておくことでIEでも安心してobject-fitを利用することができますので導入しておきましょう。