はじめに
「画像の表示時に元画像を引き伸ばさずにそのままの比率で表示したい」と言われたことが彼(object-fit)と出会ったきっかけでした。
object-fitプロパティは、画像や動画などのコンテンツを親要素のサイズに合わせて調整するためのCSSプロパティです。
このプロパティを使うことで、コンテンツを親要素にピッタリと合わせたり、アスペクト比を維持したまま切り取ったりすることができます。
この記事では、object-fitプロパティについて詳しく解説します。
object-fitを使わないで表示する
例えば
このように150×150の画像を100×200で表示させると以下のようになります。
See the Pen Untitled by tokuyuuuuuu (@tokuyuuuuuu) on CodePen.
比率が変わってるので元画像と比べると狭っ苦しくなってますよね。
これを普通の写真とかでやると結構見苦しい感じになってしまいます。
object-fitを使用
object-fitプロパティを使用すると以下のようになります。
See the Pen Untitled by tokuyuuuuuu (@tokuyuuuuuu) on CodePen.
ちゃんとデザインに載せるなら細かい調整は必要なものの、比率が変わらずに表示出来ました！
今回はcoverという値を使用しましたが、その他にも値があるので以下に詳細を記載します。
プロパティの値
contain
例えば、親要素が正方形で、画像要素が長方形である場合、object-fit: containを使用すると、画像は正方形に合わせるために縮小され、親要素のすべての領域を占有します。
ただし、画像のアスペクト比が保持され、画像全体が表示されます。
画像が親要素よりも小さい場合は、親要素に合わせて拡大されます。
このように、object-fit: containは、要素が親要素にぴったり収まるように表示されるようにするために便利なプロパティです。
cover
containとは異なり、coverは要素を親要素に合わせるために縮小するのではなく、必要に応じて拡大するため、一部が親要素からはみ出る可能性があります。
ただし、元のアスペクト比は保持されます。
例えば、親要素が正方形で、画像要素が長方形である場合、object-fit: coverを使用すると、画像は正方形に合わせるために拡大され、親要素の一部がはみ出す可能性があります。
ただし、画像のアスペクト比は保持され、画像全体が表示されます。
このように、object-fit: coverは、要素を親要素に合わせて拡大し、親要素全体を覆うように表示するために便利なプロパティです。
fill
fill 値は、画像をコンテナーにぴったりとフィットさせ、アスペクト比を維持せずに拡大または縮小します。
つまり、コンテナーの幅と高さが画像の幅と高さに完全に一致するように、画像が自動的に拡大または縮小されます。
ただし、画像のアスペクト比は維持されません。
したがって、画像がコンテナーと完全に一致する場合は、画像が切り取られる可能性があります。
none
指定されたサイズのコンテナー内に画像を表示する場合に、画像のサイズやアスペクト比を変更しないことを意味します。
つまり、コンテナー内での画像の位置とサイズは、画像の実際のサイズと位置と同じままになります。
この値を使用すると、画像が完全に表示されない可能性がありますが、画像がコンテナーに合わせて自動的に拡大縮小されることはありません。
scale-down
contain もしくは none のいずれかの値を自動的に選択するように設定します。
つまり、画像がコンテナー内に収まるように自動的に拡大縮小され、かつ、画像の実際のサイズよりも小さく表示される場合は、画像の実際のサイズに合わせて表示されます。
例えば、以下のように object-fit: scale-down を設定すると、画像が自動的に contain もしくは none のどちらかの値を選択して、画像がコンテナー内に収まるように自動的に拡大縮小されます。
ただし、画像が実際のサイズよりも小さい場合は、画像の実際のサイズに合わせて表示されます。
最後に
たまたま使う機会があったので知りましたが、まだ理解しきれてないのでこれからもう少し理解度深めようかと思います。
リファレンスにも詳しく載っているので、こちらも見てもらうとより一層理解できるかと思います！
https://www.htmq.com/css3/object-fit.shtml