こんにちは、今日はCSSのプロパティ、object-fitの使い方についてまとめていきます。
W3Cページ
それぞれの値適用時のイメージ図があります。
https://www.w3.org/TR/css-images-3/#propdef-object-fit
設定値
object-fitプロパティには以下の値が設定可能です。
値 | 説明 |
fill | ボックスのサイズに合わせます。 |
contain | アスペクト比を維持し、ボックスサイズに収まるように合わせます。 |
cover | アスペクト比を維持し、ボックスサイズ一杯になるように合わせます。 |
none | 元々のサイズからボックスのサイズ超過分がカットされます。 |
scale-down |