ひとりCSS Advent Calendar 2022 19日目です。
object-fit を学び直します。
object-fit
ごく普通のボックスに、img 要素や video 要素どどのように表示させるかを指定できる。
取りうる値
-
none- 拡大や縮小はされない（実寸）。画像の縦横比変わらず。 -
contain- ボックス内は埋まらない事がある。画像の縦横比変わらず。 -
cover- ボックス内がぜんぶ埋まる。画像の縦横比変わらず。 -
fill- ボックス内がぜんぶ埋まる。画像の縦横比が変わる。 -
scale-down- none か contain と同じ表示になる。実際のサイズが小さい方が選ばれる。
つくってみた
Retina 対応を想定し、400px四方の画像を width200px height200px で置いてみた。
See the Pen accent-color by Beco (@becolomochi) on CodePen.
感想
- none だと Retina 対応できないっぽい
- aspect-ratio と合わせて使うとレスポンシブ対応できる。便利になったなあ
- 縦横比が変わらなくて画像がボケる可能性が低い cover contain は使う回数多そう