最終更新日
object-fitは、オブジェクトをボックスにフィットさせる方法を指定するプロパティです。
object-fitを適用できるのは置換要素です。
値は、「fill」「contain」「cover」「none」「scale-down」のいずれかを指定します。
初期値 | 適用先 | 継承 |
---|---|---|
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;