North Detail / ノースディテール

BLOG ブログ

ブログ
CATEGORY
TECH

そろそろobject-fit(css)を理解しておこう

※本記事は『object-fit』をサポートしているブラウザでご覧ください
Can I use...まぁ要するにまたまたie(インターネットエクスプローラー)以外のブラウザですね^^;

例えば、アイキャッチ画像と記事タイトルをズラっと並べた『ブログインデックスページ』や、商品画像と商品名・価格などをズラズラっと並べた『ECサイト』、あるいは少しだけはにかんだ微笑みを浮かべた顔画像と自己PR・将来の野望などを並べた『人物紹介ページ』
このような画面構成の場合、画像の大きさや比率がバラバラだったりすると、少しだけモヤっとした微妙に嫌な気分になりますよね?
本棚に並んでいる ONE PIECE の巻数が揃っていなかったり、干している洗濯物のハンガーの向きが互い違いだったり、家電などのリモコンがイロイロな場所にあったりするのと、同じぐらい嫌な気分になります(あくまでも個人的見解です)。

自分独りで管理しているサイトや画面なら、自身の匙加減ひとつなので何の問題もありませんが、複数の方(特に Webリテラシーが低い方や、画像編集など出来ない方を含む)が管理・任意投稿するような CMS では、なかなか難しかったりすることでしょう。

「アスペクト比は 16:9 で、RETINA 考慮で最低幅は 750px 程度、それでいて Core Web Vitals も意識したいのでファイル容量は 300kb までにしてね~」
が、すべての人に通じるわけではありません。

そんな条件下で…「どんなサイズの画像が攻めてきても、ギッチリと型にハメてやんぜっ!」って粋なことをしてくれるのが object-fit です。

プロパティ別の表示例

使用する元画像

石の上にも三年な柴吉さん
『石の上にも三年』的なやたら可愛い 450×450px の柴吉さん正方形画像

表示例画像表示領域 230×129px

  • 石の上にも三年な柴吉さん@fill
    object-fit:fill; fillを指定すると画像アスペクト比を無視して要素の縦横いっぱいに表示されます(画像トリミングされず画像縦横全てが表示されます)
  • 石の上にも三年な柴吉さん@contain
    object-fit:contain; containを指定すると画像アスペクト比を維持し、画像トリミングされず表示されます(画像縦横全てが表示されますが要素と画像の比率差異によって余白が生じます)
  • 石の上にも三年な柴吉さん@cover
    object-fit:cover; coverを指定すると画像アスペクト比を維持しつつ、画像トリミングされ、要素の縦横いっぱいに表示されます(この場合画像横は全て表示されますが縦は切れてます)
  • 石の上にも三年な柴吉さん@none
    object-fit:none; noneを指定すると画像アスペクト比を維持しつつ、画像トリミングされ、要素の縦横いっぱいに表示されます(この場合画像拡大・縮小せずに縦横どちらも切れてます)
  • 石の上にも三年な柴吉さん@scale-down
    object-fit:scale-down; scale-downを指定すると画像アスペクト比を維持し、画像トリミングされず表示されます(contain指定との違いは縮小はされますが、拡大はされない点となります)
  • 石の上にも三年な柴吉さん@object-position
    object-fit:none;
    object-position:100% 100%;
    object-position(デフォルトはセンター)を指定することでトリミング位置を調整できます(この場合は右下基準)

考察・まとめ

いかがでしょうか?
画像の表示領域依存であれば object-fit:scale-down 、レイアウト依存であれば object-fit:cover あたりの設定をすれば、かなりイイ感じになりそうですね。

ザックリまとめると背景画像を隙間なくイイ感じに配置できちゃう、css のbackground-size:cover とか background-size:contain 的なことが、imgタグや videoタグでもできちゃうっていう感じでしょうか。(プロパティも似てますしね…)
一昔前は画像を隙間なくイイ感じに表示するために、imgタグを使わずにあえて背景画像として処理してたりしましたが、これって html文章構造的に結構なアウトです(ブッチャケ今今アサインされている案件でも、この手法をつかっていたりする現実…)。
さらに Google画像検索なるものが、かなり良い感じになってきた昨今では、SEO的にも結構なアウトです。

そして冒頭にも書きましたがインターネットエクスプローラーでは非対応で、見るも無残な表示になってしまいます…このインターネットエクスプローラーなるブラウザを、無視することが出来れば大手を振って使えるのですが、まだ対象ブラウザから外れていない案件も多いかと思います、かなり不本意ではありますが polyfill もありますので、そこは上手いことゴニョゴニョして、この便利な子を使っていきましょう。

nanba
WRITER:nanba
高い技術力を誇る『NorthDetail』内では珍しい『チカラワザ系コーダー』
主な記事 一覧へ

一覧へ

IS 501383 / ISO 27001