object-fit プロパティ
object-fit プロパティは、<img>、<video> エレメントのサイズを調整する方法を指定するプロパティです。
サイズを調整する方法とは、エレメントのサイズに対して縦横比（アスペクト比）の調整と、表示からはみ出た部分の扱い方です。
object-fit: contain;
詳しくはExample
を参照してください
親エレメント（コンテナ）のサイズは関係ないようです。
ページ内 Index
構文(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 Animation | No |
Example
object-fitの例です。imgエレメン卜のサイズを width: 300px; height: 150px; にして見づらくしています。 そのサイズ内でobject-fitはどのように働くかを示しています。