CSS
オブジェクトのフィットと配置

備考

オブジェクトフィット

object-fitプロパティは、要素が高さと幅が設定されたボックスにどのように収まるかを定義します。通常、イメージやビデオに適用されるオブジェクトフィットは、次の5つの値を受け入れます。

フィル

object-fit:fill;

画像の元のアスペクト比に関係なく、画像を拡大してコンテンツボックスに合わせます。

含む

object-fit:contain;

Containは、画像のアスペクト比を維持しながら、画像をボックスの高さまたは幅に合わせます。

カバー

object-fit:cover;

Coverは画像全体をボックスで塗りつぶします。イメージのアスペクト比は維持されますが、イメージはボックスの寸法に合わせて切り取られます。

無し

object-fit:none;

Noneはボックスのサイズを無視し、サイズ変更されません。

スケールダウン

object-fit:scale-down;

Scale-downは、オブジェクトのサイズをnoneまたはnoneとしcontain 。どちらのオプションを選択した場合でも、画像サイズが小さくなります。