We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

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

初期値50% 50%
適用対象replaced elements
継承継承する
相対値の基準refer to width and height of element itself
メディアvisual
計算値指定値
Animation typerepeatable list of simple list of length, percentage, or calc
正規順序形式文法で定義される一意のあいまいでない順序

構文

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

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

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

形式文法

<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%;
}

結果

仕様

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

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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 で実装されました。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: yyss
最終更新者: yyss,