CSS3

プロパティ

background-size

→● mdn

背景画像のサイズ法。

一連の背景画像のサイズを指定する。

<bg-size>

＝[<length-percentage[0,∞]> | auto]{1,2}
| cover
| contain

[<length-percentage[0,∞]> | auto]{1,2}

2 個の成分値は、順に、画像の横幅、縦幅を与える。与えられた成分値が 1 個だけの場合、2 個目は auto と見なされる。

百分率は、背景位置決め区画に相対的になる。

一方の次元に限り auto 値の場合：

画像は生来な縦横比を有するならば、それと他方の次元のサイズを利用して解決される／

画像は その次元において生来なサイズを有するならば、それを利用する／

他の場合は 100% と扱われる

両次元とも auto 値の場合 ：

画像は、少なくとも一方の次元において生来なサイズを有するならば、それ（それら）が利用されるべきであり、欠落している次元は、前段落の auto と同様にふるまう。他の場合のサイズは、contain と同様に決定される。【例：生来な縦横比しか無いベクター画像】

【このサイズは、［指定サイズ ← 与えられたサイズ； 既定のオブジェクトサイズ ← 背景位置決め区画］の下で，既定のサイズ法アルゴリズムを利用して解決される。】

負な値は無効。

<DIV style="border:10px dotted #0f0; width:80px; height:80px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-size:30px 100%;
">テスト</DIV>

<DIV style="border:10px dotted #0f0; width:80px; height:80px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-size:auto;
">テスト</DIV>

<DIV style="border:10px dotted #0f0; width:80px; height:80px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-size:30px auto;
">テスト</DIV>

contain

画像を ― 生来な縦横比を有するならば、それを保全しつつ ― その［ 横幅、縦幅 ］とも背景位置決め区画の内側に収まるような、最大サイズに拡縮する。

【このサイズは、［拘束矩形 ← 背景位置決め区画］の下で、包含拘束として解決される。】

<DIV style="border:10px dotted #0f0; width:80px; height:80px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-size:contain;
">テスト</DIV>

cover

画像を ― 生来な縦横比を有するならば、それを保全しつつ ― その［ 横幅、縦幅 ］とも背景位置決め区画を完全に覆うような、最小サイズに拡縮する。

【このサイズは、［拘束矩形 ← 背景位置決め区画］の下で、被覆拘束として解決される。】

<DIV style="border:10px dotted #0f0; width:80px; height:80px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-size:cover;
">テスト</DIV>

<DIV style="border:10px dotted #0f0; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-size:cover;
">テスト</DIV>

¶例を省く

¶説明を省く

テスト