【CSS】object-fitの用途と値の種類

object-fit

画像などをボックスにどのようにはめ込むかを指定する。

fill

ボックスサイズに合わせて縦横比を維持しないでリサイズして、全体が見えるようにはめ込む

contain

ボックスサイズに合わせて縦横比を維持しながらリサイズして、全体が見えるようにはめ込む

cover

ボックスサイズに合わせて縦横比を維持しながらリサイズして、トリミングしてはめ込む

none

リサイズしないで、ボックスサイズでトリミングしてはめ込む

scale-down

サイズとボックスサイズの小さい方に合わせて、縦横比を維持しながらリサイズして、全体が見えるようにはめ込む

最後に

読んでいただいた方、ありがとうございました。