概要
object-position プロパティは、ボックス内における置換要素の配置を指定します。
| 初期値 | 50% 50% |
|---|---|
| 適用対象 | replaced elements |
| 継承 | 継承する |
| 相対値の基準 | refer to width and height of element itself |
| メディア | visual |
| 計算値 | 指定値 |
| アニメーションの可否 | 可。 。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちますの値として補完しますの反復可能リスト、の単純なリスト形式$1$、length または percentage, calc(); |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
/* <position> 値 */ object-position: 100px 50px; /* グローバル値 */ object-position: inherit; object-position: initial; object-position: unset;
値
<position>- 要素のボックスの端に対する 2D 上の位置を表す、1 個から 4 個の値による
<position>です。相対値または絶対値のオフセットを指定できます。また、要素のボックスの外側の位置も指定できます。
形式文法
<position>
例
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%;
}
結果
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Image Values and Replaced Content Module Level 4 object-position の定義 |
草案 | |
| CSS Image Values and Replaced Content Module Level 3 object-position の定義 |
勧告候補 | 最初期の定義 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 31.0 | 36 (36) | 未サポート | 11.60-o 19.0 |
未サポート[1] |
| 機能 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 4.4.4 | 36 (36) | 未サポート | 11.5-o 24 |
未サポート |
[1] WebKit Nightly では、bug 122811 で実装されました。
関連情報
- ほかの画像関連 CSS プロパティ:
object-fit,image-orientation,image-rendering,image-resolution.