最終更新日 2021年6月30日

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;

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。