50%横方向の位置
1つ目の値です。0%は左、50%は中央、100%は右へ中身を合わせます。
object-position
画像や動画の中身を、決めた枠のどの位置に合わせるかを指定するプロパティ。横と縦の割合を動かし、切り抜かれる風景を比べます。
遊んでみよう
object-fit: coverの2つの枠で横・縦を比較
横位置が見える枠
縦位置が見える枠
CSS
.element object-position: 50% 50%;
値のパターン
object-positionの構成要素
50%縦方向の位置
2つ目の値です。0%は上、50%は中央、100%は下へ中身を合わせます。
right 20px bottom 16px辺からの距離
右から20px、下から16pxのように、基準にする辺と距離も組み合わせられます。
早見表
初期値は50% 50%で中央です。キーワードでも割合でも、横方向と縦方向の位置を表せます。
01
50% 50%中央初期値02
0% 0%左上left top03
100% 0%右上right top04
50% 100%中央下center bottom05
20px 40px左上から長さで配置長さ06
right 20px bottom 16px右下から距離を空ける辺 + 長さよくある使い方
01
人物を画像枠の上寄りに見せる
横長のヒーロー画像では、注目したい顔が切れないように縦方向の位置を上へ調整します。
.hero img { object-fit: cover; object-position: 50% 30%; }02
カード画像の主役を右へ残す
coverで左右が切り取られる画像は、主役がいる側へ中身を寄せると構図を保てます。
.card img { object-fit: cover; object-position: right center; }03
サムネイルの見せる部分を揃える
同じ大きさの一覧画像で、商品や作品の重要な部分が残る位置を画像ごとに指定します。
.thumbnail img { object-fit: cover; object-position: left bottom; }ポイント
動くのは要素の箱ではなく、中の画像。
object-positionは画像や動画などの置換要素の中身を配置し、大きさは変えません。先にwidthとheightで枠を決め、必要に応じてobject-fit: coverなどと組み合わせます。初期値は50% 50%、適用対象は置換要素で、子要素へは継承されません。割合は要素と中身の余った距離を基準に計算され、負の値や100%を超える値も指定できます。背景画像の位置を変える場合はbackground-positionを使います。
関連するCSSも見てみよう。
object-position と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。