こんにちは、ユアサです。
少し前の話になりますが、The State of CSS 2020でCSSプロパティがいくつか話題になっていました。
その中でも、今回はobject-fitプロパティについて紹介していこうと思います。
object-fitプロパティの認知度について
The State of CSS2019の地点では、「object-fitプロパティを使ったことがある・存在は知っている」と答えた人は63.2%、2020の地点では75.4%いました。
認知度としては増えてきているようですが、一方で「そもそもobject-fitプロパティを知らない」と答えた人は2019の地点で36.8%、2020の地点では24.5%と一定数いるようです。
僕自身もこの間業務で初めて存在を知ったのもあり、今回は復習の意味も兼ねてブログの記事としてまとめます。
object-fitの値
object-fitプロパティはimg要素やvideo要素をどのようにはめ込むのかを設定できます。内容は以下の通りです。
contain
アスペクト比を維持した状態で要素範囲内に拡大・縮小する。オブジェクトと要素範囲のアスペクト比が合わない場合は、backgroundの指定が無ければ余白部分が透過された状態になる。cover
アスペクト比を維持した状態で要素範囲内を覆い尽くすように拡大縮小する。オブジェクト・要素のアスペクト比が合わない場合はサイズ分が切り取られる。fill
アスペクト比を無視して要素範囲内を埋めるように表示する。none
object-fitプロパティを設定していない状態と同様、そのままのサイズで表示される。scale-down
あらかじめnoneとcontainの表示サイズで決められ、オブジェクトのサイズが小さい方が表示される。
使用例
例えば、object-fit:coverをオブジェクトの元のサイズより小さいwidth、heightを設定した上で使用すると、
See the Pen by felly (@felly00505) on CodePen.
このように、トリミングされた画像のように表示させることができます。
また、object-positionも一緒に使うと、以下のようにオブジェクトの好きな箇所でトリミングしたように画像を表示させることもできます。
See the Pen object-fit:cover position by felly (@felly00505) on CodePen.
widthを100%にして設定すると、画像の引き伸ばしをしない状態でレスポンシブ対応させることができます。
See the Pen object-fit:cover 100% by felly (@felly00505) on CodePen.
まとめ
今回はobject-fitプロパティについて紹介しました。
ヘッダー画像などを自分のイメージ通りのサイズ感に表示させる方法を知らなかったので、これから使う機会が増えそうだと感じました。
今回も最後まで読んでいただきありがとうございました（^人^）
