CSS object-positionプロパティ：object-fitで配置した要素の位置を指定する

定義と使い方

object-positionプロパティは、
画像や動画のような置換コンテンツ（object）が、自身の要素ボックス内でどの位置（position）を基準に整列されるかを指定します。

このプロパティを使用すると、画像や動画コンテンツを要素ボックス内で任意の位置を基準に整列することができます。通常はobject-fitプロパティと組み合わせて使用されます。

基本の例

形式の構文

値

object-positionプロパティの値
`<position>`	コンテンツボックス内の画像または動画の位置を指定します。最初の値がx軸を制御し、2番目の値がy軸を制御します。文字列の位置（`left`、`center`、`right`など）や数値の長さ（`px`、`%`など）で指定できます。負の値も許容されます。

構文

CSS

/* キーワード値 */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;
object-position: center top;

/* パーセンテージ値 */
object-position: 45% 55%;

/* 長さの値 */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 13ch 6em;

/* コーナーオフセット値 */
object-position: top 0 right 10px;
object-position: bottom 12px right 20px;
object-position: right 3rem bottom 10px;

/* グローバル値 */
object-position: inherit;
object-position: initial;
object-position: unset;
object-position: revert;
object-position: revert-layer;

形式定義

画像や動画のような置換コンテンツ（object）が自身の要素ボックス内でどの位置（position）を基準に整列されるかを指定します。content-box内での開始位置を決定し、主に<img>や<video>でobject-fitと併用されます。

object-positionプロパティの形式定義
初期値	`50% 50%`
適用要素	置換要素（replaced elements）
継承	はい
アニメーション	はい

活用例

画像と動画の例を通して確認していきます。

画像の例

CSS

.container {
    width: 260px;
    height: 250px;
    border: 5px dashed red;
}
img {
    width: 100%;
    height: 100%;
    object-fit: none;
    object-position: left bottom;
}

動画の例

CSS

.container {
    width: 260px;
    height: 250px;
    border: 5px dashed red;
}
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}