最終更新日

object-fitプロパティ

object-fitは、オブジェクトをボックスにフィットさせる方法を指定するプロパティです。

object-fitを適用できるのは置換要素です。

値は、「fill」「contain」「cover」「none」「scale-down」のいずれかを指定します。

object-fit

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;
参考文献:CSS Image Values and Replaced Content Module Level 3外部リンク
HOME