CSS3: object-position プロパティ - 画像等の表示位置の指定
■ 概要
| 項 目 | 説 明 |
|---|---|
| 記述形式 |
|
| 値 の形式 | 値： left，center，right，top，bottom，数値 （長さ，%） 値1： left，center，right，数値（長さ，％）（横方向） 値2： top，center，bottom，数値（長さ，％）（縦方向） 値3： left，center，right（横方向） 値5： top，center，bottom（縦方向） 値4 値6： 数値（長さ，％）（横方向，縦方向） |
| 初 期 値 | 0% 0% |
| 対応ブラウザー | C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+ |
| 適用可能な要素 | 置換要素 |
| 継 承 | する |
■ 解説
object-positionプロパティ は，置換要素にコンテンツをフィットさせる際の揃え位置 を指定します。
object-positionプロパティは，「CSS Paged Media Module Level 3」ワーキンググループの 2006年10月10日の草案 には， fit-position と記述されていますが，最新の草案（2013年3月14日） では， object-positionプロパティ に 改名されたことが述べられています。
値の形式は，background-position プロパティの位置指定の方法と同じです。
上の表に示したとおり，「位置の値」 の指定方法は大きく分けると，次の３通りになります。
- 単独のキーワードまたは数値 によるもの
- 横方向と縦方向に各１つずつの ２つのキーワードまたは数値 によるもの
- 横方向と縦方向，それぞれについて，基準位置とオフセット（数値，％）のペア で指定するもの
このうち，1 の場合は，指定された以外のもう１つの値は center として扱われます。
また，2 の場合は，縦方向と横方向のどちらか一方の指定を省略すると 1 と同形式の指定になります。
ただし，3 の場合は，横方向と縦方向の両方の指定が必要で一方を省略することはできません。 また，オフセットを省略すると 0 として扱われます ので，キーワードを使った 2 の指定と同形式になります。 逆に，キーワードを省略してオフセットのみを指定した場合には，横方向では left，縦方向では top が 適用されます ので，数値を使った 2 の指定と同形式になります。 つまり，値3 と 値4，値5 と 値6 の両ペアで， キーワードかオフセットかのどちらかを省略すると， 2 の指定と同形式になります。
なお，オフセットの値は，キーワードで指定した画像等の境界から「内側への移動」が正 で， 「外側への移動」が負 となっています。
指定できる値のキーワードと数値は，以下のとおりです。
| 方 向 | 値 | 説 明 |
|---|---|---|
| 横方向 | left | 左寄せで表示します。 （要素とボックスの左端を合わせます） （数値で 0% や 0px などを指定した場合と同じ） |
| center | 中央配置で表示します。 （要素とボックスの中点位置を合わせます） （数値で 50% を指定した場合と同じ） |
|
| right | 右寄せで表示します。 （要素とボックスの右端を合わせます） （数値で 100% などを指定した場合と同じ） |
|
| 数値 | 要素の パディングボックス（padding-box） の幅を基準として，百分率（%）や px や em などの単位をつけた数値で基準位置からの距離を指定します。 | |
| 縦方向 | top | 上寄せで表示します。 （要素とボックスの上端を合わせます） （数値で 0% や 0px などを指定した場合と同じ） |
| center | 中央配置で表示します。 （要素とボックスの中点位置を合わせます） （数値で 50% を指定した場合と同じ） |
|
| bottom | 下寄せで表示します。 （要素とボックスの下端を合わせます） （数値で 100% などを指定した場合と同じ） |
|
| 数値 | 要素の パディングボックス（padding-box） の高さを基準とした % をつけた数値や px や em などの単位をつけた数値で基準位置からの距離を指定します。 | |
| 備 考 | 指定位置の基準となるのは， パディングボックス（padding-box） です。 数値指定では，（キーワードで指定した）基準位置からの距離で画像等の表示位置を指定します。 | |
■ 使用例（ fit-position プロパティの利用）
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" >
<!--
div.float { float: left}
img.sample {
width: 200px;
height: 150px;
border: 2px solid #8c8c8c
background-color: yellow;
object-fit: contain;
}
.opos1 { object-position: left 10px top 15px; }
.opos2 { object-position: right 3em bottom 10px; }
.opos3 { object-position: 100% 100%; }
.opos4 { object-position: 50% 50%; }
.opos5 { object-position: center; }
-->
</style> |
| HTML <body> ～ </body> |
<div class="float" > <div><img src="../logo.gif" class="sample opos1"></div> <div class="i">↑ left 10px top 15px の表示</div><br /> <div><img src="../logo.gif" class="sample opos2"></div> <div class="i">↑ right 3em bottom 10px の表示</div><br /> <div><img src="../logo.gif" class="sample opos3"></div> <div class="i">↑ 100% 100% の表示</div><br /> <div><img src="../logo.gif" class="sample opos4"></div> <div class="i">↑ 50% 50% の表示</div><br /> <div><img src="../logo.gif" class="sample opos5"></div> <div class="i">↑ center の表示</div> </div> <div class="float" > <div style="margin: 120px 0 0 120px;"> <div><img src="../logo.gif" style="width: 150px; height: 150px; ></div> <div class="i" style="margin-left: 30px;">↑ 元の画像 （logo.gif）</div> </div> </div> |
| ブラウザー 表示例 |
|---|
 ↑ left 10px top 15px の表示 ↑ right 3em bottom 10px の表示 ↑ 100% 100% の表示 ↑ 50% 50% の表示 ↑ center の表示
↑ 元の画像 （logo.gif）
|
■ 備考
- 「HTMLクイック リファレンス」の「object-position プロパティ」のページ
- 「ねこだまのCSSリファレンス&デモ」の「object-position プロパティ」のページ
- 「W3C」の「object-position プロパティ」のページ