ご覧いただきありがとうございます。
このページでは、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;
画像は左上（基準点）
コメント