CSS3

プロパティ

object-fit

→●、mdn

オブジェクトのサイズ法。

object-fit プロパティは、置換要素の内容が、その使用［横幅、縦幅］により確立されるボックスに、どう収めるべきかを指定する。

fill

置換内容は、要素の 内容ボックス を埋めるように、サイズされる：

オブジェクト の具象オブジェクト サイズ は、要素の使用［横幅、縦幅］になる。

<IMG src="Com/Picture_h.jpg" style="border:1px solid black;"><BR>
<IMG src="Com/Picture_h.jpg" style="border:1px solid red;
 object-fit:fill; width:100px;
"><BR>
<IMG src="Com/Picture_h.jpg" style="border:1px solid red;
 object-fit:fill; width:100px; height:50px;
"><BR>

none

置換内容は、要素の 内容ボックス 内に収まるようにサイズし直されない：

オブジェクトの 具象オブジェクト サイズ は、［指定サイズなし； 既定のオブジェクト サイズ： 置換要素の使用［横幅、縦幅］］の下で、既定のサイズ法アルゴリズム を利用して決定される。

<IMG src="Com/Picture_h.jpg" style="border:1px solid black;
 width:100px;
"><BR>
<IMG src="Com/Picture_h.jpg" style="border:1px solid red;
 object-fit:none; width:100px;
"><BR>
<IMG src="Com/Picture_h.jpg" style="border:1px solid red;
 object-fit:none; width:100px; height:20px;
"><BR>

[contain | cover] || scale-down

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

¶

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

¶

contain

置換内容は、その生来な縦横比を保守しつつ、要素の内容ボックスに収まるように、サイズされる：

具象オブジェクト サイズ は、［要素の使用［横幅、縦幅］による拘束矩形］に対する包含拘束 として解決される。

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

scale-down も併用された場合、内容は［none、contain］のうち、具象オブジェクト サイズが小さくなる方が指定されたかのようにサイズされる。

注記： none、contain の両者とも内容の生来な縦横比を保つので、大きさは比較可能になる。

cover

置換内容は、その 生来な縦横比 を保守しつつ、要素の 内容ボックス 全体を埋めるように、サイズされる：

具象オブジェクト サイズ は、［要素の使用［横幅、縦幅］による拘束矩形］に対する 被覆拘束 として解決される。

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

scale-down も併用された場合、内容は［none、cover］のうち、具象オブジェクト サイズが小さくなる方が指定されたかのようにサイズされる。

注記： none、cover の両者とも内容の生来な縦横比を保つので、大きさは比較可能になる。

scale-down

contain scale-down と等価。

［none、contain のうち、具象オブジェクト サイズ がより小さくなる方］が指定されていたかのように、内容をサイズする。

注記： none、contain 両者とも、内容の生来な縦横比 を保つので、大きさは比較可能になる。

<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; width:100px; height:30px;
"><BR>
<IMG src="Com/Picture.jpg" style="border:1px solid red;
 object-fit:scale-down; width:100px; height:70px;
"><BR>

内容が置換要素 の内容ボックス を完全に埋め尽くさない場合、残りの空間には置換要素の背景が現れることになる。置換要素の内容は，常に内容ボックスまでに切り落とされるので、内容は決して過フローしない。内容ボックスに相対的な オブジェクト の位置決めについては、object-position プロパティを見よ。

図と説明省く

注記： object-fit プロパティは、［fit 属性 [SMIL10]／preserveAspectRatio 属性 [SVG11]］用の <meetOrSlice> パラメーターと類似な意味論を備える。

注記： オブジェクト サイズ折衝 アルゴリズムに従って、具象オブジェクト サイズ（あるいは、この事例では内容のサイズ）は、オブジェクト 自身を直に拡縮することはないことに注意 ― それは単に、可視なキャンバスのサイズについての情報としてオブジェクトに渡される。そのサイズの中へ描く方法は、画像形式に委ねられる。特に： ラスター画像は、常に、所与のサイズに拡縮する。一方で SVG は、所与のサイズを SVG 表示域 のサイズに利用した上で、自身を描く方法を決定するときに［根である SVG 要素のいくつかの属性値］を利用する。

テスト