【CSS】「置換要素」、「object-fit」について

「object-fit」とは？

置換要素(imageやvideoなど）にコンテナの中身をどのように埋め込むか設定すること。わかりやすく言えば、「画像をトリミングする」イメージです。

以前は、positionプロパティなどを駆使して頑張ってトリミングしていたかと思いますが、object-fitを使えば簡単な指定でトリミングを行うことができます。

プロパティ	拡大縮小	トリミング
fill	引き伸ばされる	×
contain	×	×
cover	アスペクト比に従ってされる	○
none	×	○
scale-down	containの場合はされる	noneの場合はされる

fill

初期値です。要素のコンテンツボックス全体を埋めるサイズになります。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合はボックスに合うように引き延ばされます。

contain

置換コンテンツがアスペクト比を維持したまま要素のコンテンツボックスに合うように拡大縮小される。オブジェクトとボックスのアスペクト比が違う場合はレターボックス表示（左右や上下に黒帯が出る表示）になる。

cover

置換コンテンツがアスペクト比を維持したまま、コンテンツボックスを全体を埋めるように拡大縮小される。（なので、アスペクト比は一応合うようにだが引き伸ばしは行われる。）

オブジェクトのアスペクト比がボックスのアスペクト比に合わない場合は、オブジェクトの方が切り取られる。（トリミングもされる。）

none

置換コンテンツは拡大、縮小はされずにトリミングだけ行われる。

scale-down

コンテンツはnone、containを指定したかのようにサイズが決められて、オブジェクトの実際のサイズが小さい方が選ばれる。

置換要素

CSSの世界では「ブロックレベル要素」と「インライン要素」と対比して用いられる単語です。テキストではない何かに置き換えられる要素のことです。

常に置換要素として扱われる「埋め込みコンテンツ」

• iframe
• video
• embed

場合によって置換要素として扱われる「埋め込みコンテンツ」

• applet
• audio
• object
• canvas

画像

• image

object-position

object-fit:coverなどで中央配置することはできましたが、毎回中央にトリミングしたいわけではないと思います。その場合に使えるプロパティです。