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 Animation | No |
Example
object-fitの例です。imgエレメン卜のサイズを width: 300px; height: 150px; にして見づらくしています。 そのサイズ内でobject-fitはどのように働くかを示しています。
関連(Related)
HTML、CSS、DOMのメディア、画像、イメージ、音声、動画に関する用途一覧です。
HTML
CSS
DOM
- 全般
-
- インターフェイス
- ProgressEvent
- イベント
- abort、 canplay、 canplaythrough、 durationchange、 ended、 loadeddata、 loadedmetadata、 loadstart、 pause、 play、 playing、 progress、 ratechange、 seeked、 seeking、 stalled、 suspend、 ontimeupdate、 onvolumechange
- プロパティ
- altKey
- メソッド
- 画像、イメージ
-
- インターフェイス
- イベント
- プロパティ
- image-rendering
- メソッド
- 動画
-
- インターフェイス
- イベント
- waiting
- プロパティ
- メソッド