備忘録的プログラミングリファレンス

object-fitプロパティ

　object-fitプロパティは、<img>、<video>エレメントなどのサイズを調整する方法を指定するプロパティです。

　サイズを調整する方法とは、エレメントのサイズに対して縦横比（アスペクト比）の調整と、表示からはみ出た部分の扱い方です。

エレメントの縦横比を維持しながらサイズ指定内に表示
object-fit: contain;

　親エレメント（コンテナ）のサイズは関係ないようです。

構文(Syntax)

CSS

object-fit: fill | contain | cover | scale-down | none | initial | inherit;

DOM(JavaScript)

値の取得
String = object.style.objectFit;
値の設定
object.style.objectFit="fill | contain | cover | scale-down | none | initial | inherit";

値（Values）

Value摘要
fill初期値（default値）、縦横比を無視してサイズ指定で表示
contain元画像の縦横比を維持しながらサイズ指定内に収める、合わない部分はスペースになる
cover元画像の縦横比に合わせて拡大縮小し、はみ出る部分はトリミング
scale-down元画像の縦横比を維持しながらサイズ指定内に収める、合わない部分はスペースになる
none元のサイズで表示、はみ出る場合はトリミング、合わない部分はスペースになる
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考（Remarks）

初期値（Default value）fill
継承（Inherited）No
CSS AnimationNo

Example

　object-fitの例です。imgエレメン卜のサイズを width: 300px; height: 150px; にして見づらくしています。 そのサイズ内でobject-fitはどのように働くかを示しています。