CSSobject-fitプロパティは、<img>または<video>をコンテナに合わせてサイズ変更する方法を指定するために使用されます。

CSS object-fitプロパティ

CSSobject-fitプロパティは、<img>または<video>をコンテナに合わせてサイズ変更する方法を指定するために使用されます。

このプロパティは、さまざまな方法でコンテナーを満たすようコンテンツに指示します。「その縦横比を維持する」または「伸ばしてできるだけ多くのスペースを取る」など。

次のパリの画像を見てください。この画像は幅400ピクセル、高さ300ピクセルです。

ただし、上記の画像を半分の幅(200ピクセル)で同じ高さ(300ピクセル)にスタイル設定すると、次のようになります。

画像が200x300ピクセルのコンテナに収まるように縮小されていることがわかります(元の縦横比が崩れています)。

ここがobject-fitプロパティが入ります。object-fitプロパティは、次の値のいずれかを取ることができます。

• fill- これはデフォルトです。画像がいっぱいになるようにサイズ変更されます。与えられた次元。必要に応じて、画像が引き伸ばされたり、縮小されたりします。
• contain- 画像縦横比は維持されますが、指定された寸法に収まるようにサイズ変更されます
• cover- 画像は縦横比を維持します。指定された次元を埋めます。画像は収まるように切り取られます
• none- 画像はリサイズされていません
• scale-down- 画像は の最小バージョンに縮小noneまたcontain

object-fit: cover; の使用

使用する場合object-fit: cover;画像は縦横比を維持し、指定された寸法を埋めます。画像は次のように切り取られます。

object-fit:を使用します。

使用する場合object-fit: contain;画像の縦横比は維持されますが、指定された寸法に収まるようにサイズ変更されます。

object-fit: fill; の使用

使用する場合object-fit: fill;画像は、指定された寸法を満たすようにサイズ変更されます。必要に応じて、画像が収まるように引き伸ばされたり、押しつぶされたりします。

object-fit の使用:なし;

使用する場合object-fit: none;画像のサイズは変更されません:

object-fit: スケールダウンの使用。

使用する場合object-fit: scale-down;画像は最小バージョンに縮小されますnoneまたcontain:

もう一つの例

ここには2つの画像があり、ブラウザウィンドウの幅の50%と高さの100%を満たすようにします。

次の例では、使用していませんobject-fitであるため、ブラウザウィンドウのサイズを変更すると、画像の縦横比が崩れます。

例

自分で試してみる»

次の例では、object-fit: cover;であるため、ブラウザウィンドウのサイズを変更しても、画像の縦横比は維持されます。

例

自分で試してみる»

CSS object-fit その他の例

次の例は、object-fitプロパティの一例:

CSS Object-* プロパティ

次の表に、CSS object-* プロパティを示します。