CSS Reference

object-position

画像などをボックスに揃える位置を指定する

object-position プロパティは、置換要素のボックス内での配置を指定します。

指定できる値は、<position> データ型の値となります。

<position> データ型は 1つ、もしくは2つのキーワードと、任意のオフセットで指定します。

キーワードとして指定可能な値は center、top、right、bottom、left です。center 以外のキーワードは要素ボックスの辺を表します。center キーワードは、使われる場所によって左右の辺の中心か、上下の辺の中心を表します。

オフセットとして値を指定する場合は、<percentage> 値、もしくは <length> 値のどちらかで指定することができます。正の値は左右であれば右方向、上下であれば下方向に対するオフセットとなり、負の数はそれとは逆方向のオフセットとなります。

オフセット値が1つだけ指定された場合、それは X 座標を定義し、もう一方の軸は center として解釈されます。

object-positionの仕様

初期値
  • 50% 50%
対象となる要素
  • 置換要素
継承
  • なし

object-positionのサンプルソース

/* キーワードを1つ指定すると横方向（X軸）が指定されたことになり、縦方向（Y軸）は center として解釈される */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;
/* <percentage> 値での指定（左上を基点として、右に 25%、下に 75% オフセットする） */
object-position: 25% 75%;

/* <length> 値での指定 */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;
/* 各辺からのオフセット値を指定 */
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome