object-position

This translation is incomplete. この記事の翻訳にご協力ください

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%
適用対象replaced elements
継承あり
パーセンテージrefer to width and height of element itself
メディア視覚
計算値指定値
アニメーションの種類repeatable list of simple list of length, percentage, or calc
正規順序形式文法で定義される一意のあいまいでない順序

構文

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

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

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

Note: The position can be set so that the replaced element is drawn outside its box.

形式文法

<position>

where
<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> ] ]

where
<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 の定義
勧告候補 最初期の定義

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
object-positionChrome 完全対応 31Edge 完全対応 16Firefox 完全対応 36IE 未対応 なしOpera 完全対応 19
完全対応 19
完全対応 11.6
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari 完全対応 10WebView Android 完全対応 4.4.3Chrome Android 完全対応 31Firefox Android 完全対応 36Opera Android 完全対応 19
完全対応 19
完全対応 12
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari iOS 完全対応 10Samsung Internet Android 完全対応 2.0
Support for three-value syntax of positionChrome 未対応 31 — 68Edge 完全対応 16Firefox 未対応 36 — 70IE 未対応 なしOpera 未対応 19 — 55
未対応 19 — 55
完全対応 11.6
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari 完全対応 10WebView Android 未対応 4.4.3 — 68Chrome Android 未対応 31 — 68Firefox Android 完全対応 36Opera Android 未対応 19 — 48
未対応 19 — 48
完全対応 12
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari iOS 完全対応 10Samsung Internet Android 未対応 2.0 — 10.0

凡例

完全対応  
完全対応
未対応  
未対応
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報