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

object-fitプロパティ

 object-fitプロパティは、親エレメント(コンテナ)に合わせて<img>、<video>などのサイズを調整して表示する方法を指定するプロパティです。

 object-fitプロパティで、縦横比(アスペクト比)の調整と、表示からはみ出た部分の扱い方を指定します。

エレメントの縦横比を維持してコンテナに合わせて表示
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