object-position

背景・装飾

object-fitと組み合わせて使用し、画像や動画などの置換要素の位置を調整するプロパティです。top、center、bottom、left、right等のキーワードや%、pxで指定でき、アスペクト比を維持しながら表示位置を制御します。

構文

Syntax

object-position: <position>

object-position: center;

実行結果

object-position: center

中央の「中央」が見える

画像を中央に配置（デフォルト）

object-position: top left;

実行結果

object-position: top left

左上の「左上」が見える

画像を左上に配置

object-position: bottom right;

実行結果

object-position: bottom right

右下の「右下」が見える

画像を右下に配置

object-fit: cover;と組み合わせて、画像の表示位置を細かく制御できる。レスポンシブ画像で重要な部分を確実に表示したい場合に便利。

object-fitを指定しないと効果がない。background-positionと混同しやすいが、こちらは<img>タグなどの置換要素用。

Chrome 32+, Firefox 36+, Safari 10+