こんにちは。エンジニアの片岡です。

私は少しだけCSSが得意だと自称して日々の業務を行っており、CSSについての記事も3つ目になりました。

プライベートでも実際の業務でも使えるような内容を紹介していますので、少しでもCSSに興味を持っていただければと思います。

object-fitは画像（imgタグ）に対して使うCSSで、いい感じにトリミングをしたり、いい感じに配置したりするために使います。

言葉で書いてもわかりづらいのですので、利用するシーンを紹介しようと思います。

例1）トップページのメイン画像としてある画像を置きたい。
画像の枠は幅が100%、高さは600pxとしたいが、いずれかのサイズのPCでいい感じの画像を作ってしまうと、幅が違うPCで確認した時に画像が潰れたり伸びたりしてしまう。
縦横比を崩さないように表示したい。
※上下または左右は多少トリミングされてもよい

例2）商品一覧ページの商品画像としてたくさんの画像を表示したい。
画像の枠は幅が200px、高さは300pxとしたいが、用意した画像は商品ごとに縦横比がバラバラである。
縦横比を崩さないように表示したい。
※足りない部分はトリミングして合わせるのではなく、余白を補完してほしい

皆さんは上記の例のような課題が出てきたとき、どのように対応しますか？

これらの課題を解決してくれるのがobject-fitです。

やることはとても単純で、imgタグに幅、高さを指定しておき、object-fit: cover; やobject-fit: contain; を付けるだけです。

/* 例1 */

img.main-img {
width: 100%;
height: 600px;
object-fit: cover;
}

/* 例2 */

img.product-img {
width: 200px;
height: 300px;
object-fit: contain;
}

下記のサイトに、それぞれどの値にすればどんな表示のされ方になるのかがわかりやすく載っていますので、ぜひ確認してみてください

https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

object-fitは確かに便利なCSSですが、便利なCSSであれば他にもたくさんあります。ではなぜ今これを紹介しようと思ったのでしょうか？

そこには理由があります。それがこちら

https://blogs.windows.com/japan/2022/06/15/internet-explorer-11-is-no-longer-supported/

Internet Explorer 11のサポート終了ですね。

object-fitはIEで対応されていませんので、IEで確認するとデザイン崩れにつながります。

これのせいで今までobject-fitは使いづらかったのですが、サポート終了に伴いようやく堂々とobject-fitが使えるようになるということですね。

（片岡はとても喜んでいます）

IEでobject-fitが動かないことは分かりました。

それでは今まではどのようにしていたのでしょうか？

IEではデザイン崩れは許容する…？ そうできればどれほど楽だったことでしょう。

それは許されないので、何とかして見た目が綺麗になるように努力をしていました。

それがこちらのCSSです。

.main-img {
width: 100%;
height: 600px;
background-image: url('./img/top.jpg');
background-size: cover;
background-position: center;
}

object-fit: cover;やobject-fit: contain;が使えないのならbackground-size: cover;やbackground-size: contain;を使えばいいじゃないという発想です。

https://developer.mozilla.org/ja/docs/Web/CSS/background-size

これで全く同じデザインをIE対応で作ることができます。

デメリットは、divを画像代わりに使っているのでCSS見た時に何だこれとなったり、ブラウザに画像として認知してもらえないことがあります。（alt属性が使えないとか）

そんなことはエンドユーザーから見たらほとんど関係なく、取り敢えずIEでもきれいに見えるならOKと使われていた感じですね。

もちろんbackground-imageにも利点がたくさんあるので、こちらを使った方がよいこともあります。

いろいろなCSSがあることを覚えて置き、都度メリットデメリットを見ながら判断できるようになるとよいと思います。

いかがだったでしょうか？

皆さんの使っているCSS、実はSafariだと動いていないとかありませんか？

ブラウザのサポート終了によって使えるようになったCSSは他にもあります。

よかったら他のCSSについても調べてみてくださいね。