【css】object-fitとobject-position

ご覧いただきありがとうございます。

このページでは、cssのobject-fitとobject-positionを紹介しています。

object-fit

imgなどを要素の枠の中にどのように表示するかを指定するCSSです。

contain

アスペクト比はそのままで枠に収まるように拡大縮小されます。枠と比率が合わない場合は、レターボックス表示になります。

cover

アスペクト比を維持したまま、枠全体を埋めるように拡大縮小されます。アスペクト比が合わない場合は、オブジェクトの方が切り取られます。

fill

オブジェクトが完全に枠の中を埋めます。アスペクト比が合わない場合は、隙間を埋めるようにオブジェクトが引き伸ばされます。

none

拡大縮小されず、元のサイズで表示されます。

scale-down

none または contain を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。

object-position

imgなどをobject-fitで表示したときの画像の位置を指定するCSSです。

object-position: 50% 50%;

画像は枠の真ん中

object-position: right top;

画像は右上

object-position: right top;

画像は左下

object-position: 0px 0px;

画像は左上（基準点）