CSS3

プロパティ

object-fit

→●、mdn

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

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

fill

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

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

<IMG src="Com/Picture.jpg" style="border:1px solid black;

 width:100px

"><BR>

<IMG src="Com/Picture.jpg" style="border:1px solid red;

 object-fit:fill; width:100px;

"><BR>

<IMG src="Com/Picture.jpg" style="border:1px solid red;

 object-fit:fill; width:100px; height:50px;

"><BR>

contain

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

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

<IMG src="Com/Picture.jpg" style="border:1px solid red;

 object-fit:contain; width:100px; height:50px;

"><BR>

cover

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

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

<IMG src="Com/Picture.jpg" style="border:1px solid red;

 object-fit:cover; width:100px; height:50px;

"><BR>

none

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

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

<IMG src="Com/Picture.jpg" style="border:1px solid red;

 object-fit:none; width:100px; height:50px;

"><BR>

<IMG src="Com/Picture.jpg" style="border:1px solid red;

 object-fit:none; width:100px; height:30px;

"><BR>

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 要素のいくつかの属性値］を利用する。

テスト