object-position

object-position プロパティは、ボックス内における置換要素の配置を指定します。Areas of the box which aren't covered by the replaced element's object will show the element's background.

You can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the object-fit property.

初期値50% 50%
適用対象置換要素
継承あり
パーセント値要素自身の幅と高さに対する相対値
計算値指定通り
アニメーションの種類長さ、パーセント値、 calc の単純なリストの反復可能リスト

構文

/* <position> 値 */
object-position: center top;
object-position: 100px 50px;

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

<position>
要素のボックスの端に対する 2D 上の位置を表す、1 個から 4 個の値による <position> です。相対値または絶対値のオフセットを指定できます。また、要素のボックスの外側の位置も指定できます。

注: 要素がボックス外にはみ出る位置も指定できます。

形式文法

<position>

ここで
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

ここで
<length-percentage> = <length> | <percentage>

HTML コンテンツ

<img id="object-position-1" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
<img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>

CSS コンテンツ

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  background-color: yellow;
  margin-right: 1em;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 20% 10%;
}

The first image is positioned with its left edge inset 10 pixels from the left edge of the element's box. The second image is positioned with its right edge flush against the right edge of the element's box and is located 10% of the way down the height of the element's box.

出力

仕様

仕様書 策定状況 コメント
CSS Images Module Level 4
object-position の定義
草案
CSS Images Module Level 3
object-position の定義
勧告候補 最初期の定義

ブラウザ実装状況

BCD tables only load in the browser

関連情報