【CSS】object-fit のご紹介

今回はCSSの「object-fit」をご紹介いたします。

いろんな画像をサムネイル表示したり、たくさん並べて表示したりする場合、それぞれの画像サイズが違っていたり、縦横比がまるで違っていたりなど、そういった際にはどのように表示させたらよいか、本当に悩みどころでした。

以前はJavascriptを使用してhtml要素のサイズを取得して、画像のトリミング処理を行うなど、非常に手間がかかるうえに重い作業を強いられておりましたが、このCSS「object-fit」が登場し、その手間があっけなく省かれることになったのです。

ではまあ、とりあえずはサンプルをご覧ください。
https://revenue-test.biz/test_html/object-fit.html

「1.object-fit なし」「2.object-fit: contain;」「3.object-fit: cover;」「4.object-fit: fill;」「5.object-fit: scale-down;」の５パターンをサンプルとして挙げております。

「1.object-fit なし」

<img>タグにwidth:100%; height:100%; を指定しております。
なので、<li>要素に合わせて変化しているので、縦横比が変な感じになっていますね。

「2.object-fit: contain;」

縦横比を保持し、ボックスに収まるようにリサイズされます。
幅と高さのうち大きい方のサイズに合わせて比率を保持してボックスにフィットさせます。
縦横比を保持するため、<li>要素にスキマができているのがわかると思います。

「3.object-fit: cover;」

縦横比を保持してボックスを完全に覆うようリサイズされます。
「contain」と違い、スキマをなくすようにリサイズ＆トリミングされているのがわかると思います。
こういったサムネイル表示だと、これが一番使いやすそうです。

「4.object-fit: fill;」

ボックス内を満たすように縦横比を変えながらリサイズされます。
object-fit指定しない場合のimgにwidth:100%; height:100%; 指定と変わらないかと思います。

「5.object-fit: scale-down;」

none と contain のうち、小さい方のサイズに合わせて表示します。
正直、contain がほぼ適用されてしまうので、あまり覚えておかなくてもよいかもしれません。

といったように、親要素に合わせて画像をトリミングしてくれる「object-fit」をご紹介いたしました。
このCSSに関しては、割とどのブラウザも対応が早かったので、既に使用されている方も多いと思います。
また、画像だけではなく<video>要素（動画）に対しても使用することができます。

古いIEでは非対応でしたが、Edgeでは最近対応されました。
現在では、ほぼ全ブラウザで対応完了済みなので、こちら（object-fit）はガンガン使っていって差し支えないと思います。