object-fit プロパティ

object-fit プロパティは、画像やビデオなどの要素のアスペクト比やスケーリングを設定します。

構文

cssセレクタ {
  object-fit: fill または contain または cover または none;
}

object-fit プロパティの主な値を以下の表に示します：

値	説明
`fill`	要素を指定された寸法に合わせてスケーリングしますが、要素のアスペクト比は無視されます。
`contain`	要素を指定された寸法に合わせてスケーリングしますが、要素のアスペクト比は保持されます。
`cover`	要素のサイズを変更して指定された領域を完全に埋めますが、要素自体のアスペクト比は保持されます。
`none`	要素の元のサイズが保持されます。

画像に、アスペクト比を保持せずに指定されたサイズを埋めるように設定してみましょう：

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: fill;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

今度は、画像がアスペクト比を保持しながら指定されたコンテナを埋めるようにしましょう：

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: contain;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

画像のサイズを変更し、そのアスペクト比を保持したまま指定されたコンテナを完全に埋めるように設定してみましょう：

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: cover;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

画像を、その元のサイズを保持したまま指定されたコンテナ内に配置してみましょう：

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: none;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат: