ひとり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
![CSSのobject-fitを学び直す - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/134d2ab6c7622069c441fa50f7b9327243970877/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9Q1NTJUUzJTgxJUFFb2JqZWN0LWZpdCVFMyU4MiU5MiVFNSVBRCVBNiVFMyU4MSVCMyVFNyU5QiVCNCVFMyU4MSU5OSZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDbWlkZGxlJnM9NGQ3ZjIzZThlNDkzM2EzZTU3M2U5NGIyYThlZGIyZTI%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwYmVjb2xvbW9jaGkmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zMiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWVkMjcyZTNjNzdiM2U4YmUxZTUzOTg0ZGRhM2U3ZjZl%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D236f1ba9a87b6a525966bb99701ad320)