CSSオブジェクトフィットプロパティ
CSSobject-fitプロパティは、コンテナに合わせて<img>または<video>のサイズを変更する方法を指定するために使用されます。
CSSオブジェクト適合プロパティ
CSSobject-fitプロパティは、コンテナに合わせて<img>または<video>のサイズを変更する方法を指定するために使用されます。
このプロパティは、さまざまな方法でコンテナを埋めるようにコンテンツに指示します。「そのアスペクト比を維持する」や「ストレッチしてできるだけ多くのスペースを占有する」など。
パリからの次の画像を見てください。この画像の幅は400ピクセル、高さは300ピクセルです。
ただし、上の画像のスタイルをその幅の半分（200ピクセル）と同じ高さ（300ピクセル）にすると、次のようになります。
例
img {
width: 200px;
height:
300px;
}
画像が200x300ピクセルのコンテナに収まるように押しつぶされていることがわかります（元のアスペクト比は破棄されています）。
ここで、object-fitプロパティが使用されます。object-fitプロパティは、次のいずれかの値を取ることができます。
fill-これはデフォルトです。画像は、指定された寸法に合わせてサイズ変更されます。必要に応じて、画像は収まるように引き伸ばされたり押しつぶされたりしますcontain-画像はアスペクト比を維持しますが、指定された寸法に収まるようにサイズ変更されますcover-画像はアスペクト比を維持し、指定された寸法を塗りつぶします。画像は収まるようにクリップされますnone-画像のサイズは変更されませんscale-downnone-画像は、またはの最小バージョンに縮小されますcontain
object-fitの使用：cover;
画像を使用する場合object-fit: cover;、画像はアスペクト比を維持し、指定された寸法を塗りつぶします。画像は次のようにクリップされます。
例
img {
width: 200px;
height:
300px;
object-fit: cover;
}
object-fitの使用：contain;
画像を使用する場合object-fit: contain;、画像はアスペクト比を維持しますが、指定された寸法に収まるようにサイズ変更されます。
例
img {
width: 200px;
height:
300px;
object-fit: contain;
}
object-fitの使用：fill;
使用する場合object-fit: fill;、画像は指定された寸法を満たすようにサイズ変更されます。必要に応じて、画像は次のように引き伸ばされるか押しつぶされます。
例
img {
width: 200px;
height:
300px;
object-fit: fill;
}
object-fitの使用：なし;
object-fit: none;画像のサイズが変更されていない場合：
例
img {
width: 200px;
height:
300px;
object-fit: none;
}
オブジェクトフィットの使用：スケールダウン;
使用する場合object-fit: scale-down;、画像はまたはの最小バージョンに縮小されnoneます
contain：
例
img {
width: 200px;
height:
300px;
object-fit: scale-down;
}
もう一つの例
ここでは2つの画像があり、ブラウザウィンドウの幅の50％と高さの100％を埋めるようにします。
次の例ではを使用していないためobject-fit、ブラウザウィンドウのサイズを変更すると、画像のアスペクト比が破壊されます。
例
次の例では、を使用object-fit: cover;しているため、ブラウザウィンドウのサイズを変更しても、画像のアスペクト比は保持されます。
例
CSSオブジェクト-その他の例に適合
object-fit次の例は、1つの例でプロパティのすべての可能な値を示しています。
例
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
CSSオブジェクト-*プロパティ
次の表に、CSSオブジェクト-*プロパティを示します。
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |