最終更新日 
object-fitプロパティ
object-fitは、オブジェクトをボックスにフィットさせる方法を指定するプロパティです。
object-fitを適用できるのは置換要素です。
値は、「fill」「contain」「cover」「none」「scale-down」のいずれかを指定します。
CSS3での変更点
・object-fitは、CSS3から新しく追加されたプロパティです。
| 初期値 | 適用先 | 継承 |
|---|---|---|
| fill | 置換要素 | なし |
| 値 | 説明 |
|---|---|
| fill | オブジェクトはアスペクト比を変えながら、全体がコンテンツボックス内を満たすようにリサイズされます。（初期値） |
| contain | オブジェクトはアスペクト比を保ちながら、全体がコンテンツボックスに収まるようにリサイズされます。オブジェクトの幅と高さのうち、長いものがコンテンツボックスにフィットします。 |
| cover | オブジェクトはアスペクト比を保ちながら、コンテンツボックスを完全に覆うようリサイズされます。オブジェクトの幅と高さのうち、短いものがコンテンツボックスにフィットし、長いものははみ出します。 |
| none | オブジェクトはリサイズしません。 |
| scale-down | 「none」か「contain」の小さい方を適用します。 |
サンプルコード
object-fit: fill; object-fit: contain; object-fit: cover; object-fit: none; object-fit: scale-down;
ザマワンにエントリーしました！
『ザマワン』は「座間ワンミニッツ」の略称であり、座間市の魅力を１分にギュッと詰め込む動画コンテストです。