css_html/css_WEB-ITnoseのbackground-size属性

背景サイズの値の種類: 1 または 2 の値。これらの値は、ピクセル px、パーセンテージ %、または auto、またはカバー、含まれる特定の値のいずれかです。

Background-sizeは2つの値を設定でき、1つは必須、1つはオプションです。
最初の値は背景画像の幅を指定するために使用され、2 番目の値は背景画像の高さを指定するために使用されます。background-size に 1 つの値のみが設定されている場合、2 番目の値はデフォルトで自動高さになります。デフォルトの高さは自動であり、コンテンツに応じて増加します。通常、高さを適応させたい場合は、設定する必要はありません) (cover と contains の特定の値を除く)。

div{
background-image:url(test.png);
background-size:100px;

と同等:

div{
background-image:url ( test.png);
background-repeat:no-repeat;
background-size:100px auto;

特定のデモ:background-size 値の定義を表示します。 firebug を使用してインスタンス ノードをキャプチャすると、2 番目の値が自動的に追加され、その値が auto であることがわかります。もちろん、2 番目の値を手動で auto に設定し、それを DEMO インスタンスと比較することもでき、効果は同じになります。

背景サイズの特定の値:

cover: 画像自体の幅と高さの比率を維持し、背景を定義する領域を完全にカバーするように画像を拡大縮小します。
contains: 幅と高さを維持します。画像自体の高さの比率、画像を幅に合わせて拡大縮小する、または高さが背景を定義する領域にぴったり合うようにする-repeat;
background-size:cover;
}

前の例では、背景画像が div 領域全体をカバーします。具体的なデモ:background-size:cover を確認してください。

contains value:

div{
background-repeat:no-repeat;
background-size:contain;

上記の例では、背景画像は次のようになります。幅に合わせて拡大縮小するか、div 領域のどちらかの側に高さを調整します。特定のデモ:background-size:contain を確認してください。