CSSのobject-fitを学び直す - Qiita

ひとり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