※本記事は『object-fit』をサポートしているブラウザでご覧ください
Can I use...まぁ要するにまたまたie(インターネットエクスプローラー)以外のブラウザですね^^;
例えば、アイキャッチ画像と記事タイトルをズラっと並べた『ブログインデックスページ』や、商品画像と商品名・価格などをズラズラっと並べた『ECサイト』、あるいは少しだけはにかんだ微笑みを浮かべた顔画像と自己PR・将来の野望などを並べた『人物紹介ページ』
このような画面構成の場合、画像の大きさや比率がバラバラだったりすると、少しだけモヤっとした微妙に嫌な気分になりますよね？
本棚に並んでいる ONE PIECE の巻数が揃っていなかったり、干している洗濯物のハンガーの向きが互い違いだったり、家電などのリモコンがイロイロな場所にあったりするのと、同じぐらい嫌な気分になります(あくまでも個人的見解です)。
自分独りで管理しているサイトや画面なら、自身の匙加減ひとつなので何の問題もありませんが、複数の方(特に Webリテラシーが低い方や、画像編集など出来ない方を含む)が管理・任意投稿するような CMS では、なかなか難しかったりすることでしょう。
「アスペクト比は 16：9 で、RETINA 考慮で最低幅は 750px 程度、それでいて Core Web Vitals も意識したいのでファイル容量は 300kb までにしてね～」
が、すべての人に通じるわけではありません。
そんな条件下で…「どんなサイズの画像が攻めてきても、ギッチリと型にハメてやんぜっ！」って粋なことをしてくれるのが object-fit です。
『石の上にも三年』的なやたら可愛い 450×450px の柴吉さん正方形画像
いかがでしょうか？
画像の表示領域依存であれば object-fit:scale-down 、レイアウト依存であれば object-fit:cover あたりの設定をすれば、かなりイイ感じになりそうですね。
ザックリまとめると背景画像を隙間なくイイ感じに配置できちゃう、css のbackground-size:cover とか background-size:contain 的なことが、imgタグや videoタグでもできちゃうっていう感じでしょうか。(プロパティも似てますしね…)
一昔前は画像を隙間なくイイ感じに表示するために、imgタグを使わずにあえて背景画像として処理してたりしましたが、これって html文章構造的に結構なアウトです(ブッチャケ今今アサインされている案件でも、この手法をつかっていたりする現実…)。
さらに Google画像検索なるものが、かなり良い感じになってきた昨今では、SEO的にも結構なアウトです。
そして冒頭にも書きましたがインターネットエクスプローラーでは非対応で、見るも無残な表示になってしまいます…このインターネットエクスプローラーなるブラウザを、無視することが出来れば大手を振って使えるのですが、まだ対象ブラウザから外れていない案件も多いかと思います、かなり不本意ではありますが polyfill もありますので、そこは上手いことゴニョゴニョして、この便利な子を使っていきましょう。
