object-position | スタイルシートリファレンス

適用できる要素全て
継承あり
初期値50% 50%

object-positionとは?

CSSのobject-positionプロパティはボックス内の画像(img要素)や動画(video要素)などの表示位置を制御するプロパティです。

初期値は縦横が真ん中の位置ですが、左右上下で配置を動かす事が出来ます。

object-positionで指定できる値

CSSのobject-positionプロパティはキーワード値、%指定、数値指定が可能です。

キーワード値

object-positionプロパティのキーワード値の位置関係の図
object-positionプロパティのキーワード値は横位置・縦位置の順番で指定します。

横位置

object-positionプロパティの横位置は

  • left:左
  • center:真ん中
  • right:右
をキーワード値として指定出来ます。
 

縦位置

object-positionプロパティの縦位置は

  • top:上
  • center:真ん中
  • bottom:下
をキーワード値として指定出来ます。

 

%指定

ボックスの左上を基点として横・縦の位置を%で指定出来ます。

%指定の位置関係
初期値の50% 50%は「真ん中」の位置を表します。

0% 0%が「左上」で、100% 100%は「右下」となります。

数値指定

ボックスの左上の位置から距離を数値にpxなど長さの単位を付けた数値指定が可能です。

あわせて読みたい
CSSの長さの単位の種類とその意味を解説!のイメージ
CSSの長さの単位の種類とその意味を解説!
CSSのemやrem、pxなど長さの単位とその意味についてサンプルコード付きで解説します。CSSの長さの単位の意味を把握してフロントエンドの開発に活用しましょう!

構文

/* 構文 */
object-position : 左位置 上位置;

object-positionを使ったサンプルコード

キーワード値

%指定

数値指定

object-positionのブラウザ対応状況

CSSのobject-positionプロパティ自体はモダンなブラウザのほぼ全てで対応していますが、IEには対応していないため注意しましょう。

Can I use... Support tables for HTML5, CSS3, etc