🐙

object-fitとは

2024/07/09に公開

https://untype.jp/blog/202401291951
この記事の内容について勉強した内容です。

object-fitは置換要素（img要素やvideo要素など）表示領域に合わせてフィットさせることができる CSS プロパティです。画像を挿入すると親要素からはみ出したり拡大縮小されて縦横比が崩れたりすることがある。

そんな時にobject-fitを利用することで解決できる

object-fitの値

画像は表示領域全体を応用に伸縮し縦横比を無視して埋め尽くされる

画像は縦横比を維持したまま表示領域にフィットするように拡大縮小される。必ず画像全体が見えるように収まるので表示領域と画像の縦横比が異なる場合は上下もしくは左右に余白が発生する
。

画像は縦横比を維持したまま表示領域を完全に覆うように拡大縮小されます。表示領域に余白が発生しないように画像が引き伸ばされるので表示領域と画像の縦横比が異なる場合は画像の上下もしくは左右の一部が切り取られる。

画像は拡大縮小されずそのままのサイズで表示される。画像が表示領域に収まらない場合はトリミングされ、表示領域よりも小さい場合は余白が発生する。

画像が表示領域に収まらない場合はcontain、表示領域よりも小さい場合はnoneが適用される。

似ているプロパティとしてbackground-sizeがある。どちらも画像のサイズを制御するためのプロパティ。一部存在しないプロパティがあるが似たような使い方がされる。

両者の違いとしては適用対象にある。object-fitはイメージ要素やビデオ要素を制御するのに対して、background-sizeは背景画像を制御する。

つまりイメージとして表示するのかそれとも背景として表示するのかによって使い分ける。