CSS3

プロパティ

object-position

→●、mdn

オブジェクトの位置決め。

object-position プロパティは、置換要素のボックス内での整列法を決定する。[CSS-VALUES-3] に定義される <position> 値型（background-position 用にも利用される）は、具象オブジェクト サイズ をオブジェクト 区画に利用し、内容ボックス を区画の位置決めに利用して解決される†。

【† どう“解決される”か定義されていないが、おそらく、次の対応関係の下で［background-position 用の <position> 値］と同様に解決するように見受けられる： (1) 具象オブジェクト サイズ → 背景画像のサイズ、(2) 内容ボックス → 背景位置決め区画】

注記： ボックス内の、置換要素で覆われない部分には、要素の背景が現れることになる。

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

[left | center | right] || [top | center | bottom]

横位置と 縦位置。

<IMG src="Com/Picture.jpg" style="border:1px solid black;"><BR>
<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:scale-down;
 object-position:left center;
 width:100px; height:70px;
"><BR>
<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:scale-down;
 object-position:top center;
 width:100px; height:70px;
"><BR>

[left | center | right | <length-percentage>] [top | center | bottom | <length-percentage>]?

横位置と縦位置で<length-percentage>を含む。「||」が無いので、順番は、横位置 縦位置。

片方を省いた場合は横位置の指定となる。¶縦位置はcenterに値する？。

<IMG src="Com/Picture.jpg" style="border:1px solid black;"><BR>
<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:scale-down;
 object-position:left 20%;
 width:100px; height:70px;
"><BR>
<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:scale-down;
 object-position:center 20%;
 width:100px; height:70px;
"><BR>

[ [left | right] <length-percentage>] && [ [top | bottom] <length-percentage>]

横に<length-percentage>指定と、縦に<length-percentage>指定。「&&」なので順番は任意。

<IMG src="Com/Picture.jpg" style="border:1px solid black;"><BR>
<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:scale-down;
 object-position:left 20% top 40%;
 width:100px; height:70px;
"><BR>
<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:scale-down;
 object-position:top 20% left 40%;
 width:100px; height:70px;
"><BR>

<length-percentage>

＝[<length> | <percentage>]

<percentage> は <length> に解決される。

top

縦位置に対する 0% に算出される。

<IMG src="Com/Picture.jpg" style="border:1px solid black;"><BR>
<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:contain;
 object-position:top;
 width:50px; height:100px;
"><BR>
<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:cover;
 object-position:top;
 width:80px; height:30px;
"><BR>

bottom

縦位置に対する 100% に算出される。

<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:contain;
 object-position:bottom;
 width:50px; height:100px;
"><BR>
<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:cover;
 object-position:bottom;
 width:80px; height:30px;
"><BR>

left

横位置に対する 0% に算出される。

<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:contain;
 object-position:left;
 width:100px; height:70px;
"><BR>
<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:cover;
 object-position:left;
 width:40px; height:100px;
"><BR>

right

横位置に対する 100% に算出される。

<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:contain;
 object-position:right;
 width:100px; height:70px;
"><BR>
<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:cover;
 object-position:right;
 width:40px; height:100px;
"><BR>

center

横位置が指定されていなければ、横位置に対する 50%（すなわち left 50% ）に算出され、他の場合は、縦位置に対する 50%（すなわち top 50%¶→横位置 50% ）に算出される。

<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:contain;
 object-position:center;
 width:100px; height:70px;
"><BR>
<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:cover;
 object-position:center;
 width:70px; height:100px;
"><BR>
<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:scale-down;
 object-position:center;
 width:70px; height:100px;
"><BR>

<length> ○

長さ値は、固定された長さによるオフセットを与える。
例えば、値ペア 2cm 1cm に対しては、画像は、その左上隅が、背景位置決め区画の左上隅から［ 2cm 右、1cm 下］の所に位置するように置かれる。 ¶左位置からの指定のようだ。

<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:contain;
 object-position:10px;
 width:100px; height:70px;
"><BR>
<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:cover;
 object-position:10px;
 width:70px; height:100px;
"><BR>
<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:scale-down;
 object-position:10px;
 width:70px; height:100px;
"><BR>

<percentage> ○

百分率値による［横／縦］オフセットは、［背景位置決め区画の［横幅／縦幅］から 背景画像の［横幅／縦幅］を引いた結果］に相対的になる。この画像サイズは background-size にて与えられる¶？。

<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:contain;
 object-position:20%;
 width:100px; height:70px;
"><BR>
<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:cover;
 object-position:20%;
 width:70px; height:100px;
"><BR>
<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:scale-down;
 object-position:20%;
 width:70px; height:100px;
"><BR>

テスト