【CSS】object-fitの使い方、IE崩れ対策も

2019-04-10 14:03

css上で画像のトリミングできる「object-fit」はとても便利です。
レスポンシブデザインがデフォルトになった現在では、覚えていて損はないCSSたと言えるでしょう。

そこで今回は、使い方と、IE対策を紹介したいと思います。

object-fitの使い方
object-fitのIE対策

object-fitの使い方① – 縦横を指定し切り抜く

300px×300pxへ中心を起点にトリミングします。
object-fit: cover;で実寸のサイズから型抜きをする要領で切り抜きます。

img.object_fit_01 {
    width: 300px;
    height: 300px;
    object-fit: cover;
    object-position: 50%;
}

object-fitの使い方② – 高さのみを指定し切り抜く

widthは100%でウィンドウに合わせ、高さのみ300pxへ中心を起点にトリミングします。ダイナミックなKVなんかに使えますね。

img.object_fit_02 {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: 50%;
}

object-fitの使い方③ – 切り抜く起点を調整する

widthは100%でウィンドウに合わせ、高さのみ350pxへ
左辺を起点にトリミングします。
オブジェクトの位置を操作するには「object-position」を操作します。

img.object_fit_03 {
    width: 300px;
    height: 300px;
    object-fit: cover;
    object-position: 0% 0%;
}

object-fitのIE対策!崩れた時の解決法

実はobject-fitは大変便利なcssながら、IEには未対応です。ブラウザごとの対応は「Can I Use」で確認しましょう。赤位マークですと未対応、緑は問題なく表示されます。

そこで、IE対策として最も簡単なのが、jsを使ったブラウザ対応です。下記のJSをhtmlに貼るだけ+CSSでのサポートで、綺麗に表示されます。object-fitでトリミングしたい画像には共通で「.of_js」など当てておくと良いかもしれませんね!

<!--objedt-fit(IE対策)-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js"></script>
<script>objectFitImages();</script>

/*objedt-fit IE対策*/
img.of_js {
  object-fit: cover;
  font-family: 'object-fit: cover;'; /*IE対策*/
}

以上です。レスポンシブデザインのレイアウトをしていく中で、リサイズした画像をたくさん用意しなくてもいいのは、工数節約につながります。またフルwidthのキービジュアルなど大胆なデザインにも活用できますので、ぜひ参考にしてくだい。