object-position
object-position
は CSS のプロパティで、ボックス内における置換要素の中身の配置を指定します。ボックスの領域内で置換要素のオブジェクトに覆われていない部分は、要素の背景が表示されます。
置換要素の本来のサイズ (すなわち、自然なサイズ) を、その要素のボックス内に合わせる方法を調整するには、object-fit
プロパティを使用することができます。
試してみましょう
構文
/* <position> 値 */
object-position: center top;
object-position: 100px 50px;
/* グローバル値 */
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: unset;
値
<position>
-
要素のボックスの端に対する 2D 上の位置を表す、1 個から 4 個の値です。相対値または絶対値のオフセットを指定できます。
メモ: 置換要素がボックス外にはみ出る位置も指定できます。
公式定義
形式文法
object-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
それぞれ MDN のロゴを表示する 2 つの <img>
要素があります。
<img id="object-position-1" src="mdn.svg" alt="MDN Logo"/>
<img id="object-position-2" src="mdn.svg" alt="MDN Logo"/>
CSS
この CSS には、<img>
要素自体の既定のスタイルと、2 つの画像それぞれに個別のスタイルが含まれています。
img {
width: 300px;
height: 250px;
border: 1px solid black;
background-color: silver;
margin-right: 1em;
object-fit: none;
}
#object-position-1 {
object-position: 10px;
}
#object-position-2 {
object-position: 100% 10%;
}
1 枚目の画像は、その左端が要素のボックスの左端から 10 ピクセルはみ出して配置されています。2 番目の画像は、その右端が要素のボックスの右端と同じ位置にあり、要素のボックスの高さの 10% の位置にあります。
結果
仕様書
Specification |
---|
CSS Images Module Level 3 # the-object-position |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- その他の画像関連 CSS プロパティ:
object-fit
,image-orientation
,image-rendering
,image-resolution