【CSS】背景画像を表示場所に自動フィットさせる設定
【CSS】
背景画像を表示場所に自動フィットさせる設定
「背景画像」を表示する場所のサイズに、
フィットさせたい時は、
「background-size」プロパティで、
背景画像の設定をします。
「background-size: cover」で、背景画像を表示範囲に自動フィットさせる方法
「background-size: cover」は、
背景画像を縦横比を維持したまま、「拡大」「縮小」し、表示範囲全体に表示する設定で、
表示範囲以上の部分は、自動でトリミングされる。
「background-size: cover」のサンプルコード
background-size: cover;
background-size: contain;
background-repeat: no-repeat;
background-size: 30%;
background-size: 幅 高さ;
background-size: 200px 100px;
/* キーワード値 */
background-size: cover;
background-size: contain;
/* 値 1 つの構文 */
/* 画像の幅 (高さは 'auto' になる) */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
/* 値 2 つの構文 */
/* 1 つ目の値は画像の幅、2番目の値は高さ */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
/* 複数の背景 */
background-size: auto, auto; /* `auto auto` と混同しないでください */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
/* グローバル値 */
background-size: inherit;
background-size: initial;
background-size: revert;
background-size: unset;
「background-size」プロパティの設定値
値 | 説明 |
contain |
「contain」は、画像の縦横比を維持したまま、できるだけ大きなサイズで表示範囲内に表示する。
画像より表示範囲が大きい場合、画像が繰り返し(リピート)タイル状に表示される。
画像を1度だけ表示させたい場合は、「background-repeat: no-repeat」を指定する必要がある。
|
cover |
「cover」は、背景画像を「拡大」「縮小」し、表示範囲全体に表示する値。
画像以上の表示範囲の場合は、背景画像を自動で拡大し、
画像の比率と異なる場合は、
上下左右を自動トリミングし、
表示範囲全体に背景画像を表示する。
|
auto |
「auto」は、背景画像の縦横比率を維持したまま、必要な分だけ「拡大」「縮小」をする。
|
<length> |
指定したサイズに、背景画像を「拡大」「縮小」する値。
|
Back
サイズ指定で、背景画像を表示範囲にフィットさせる方法
「background-size」プロパティは、
数値で、背景画像の大きさを指定することができる。
サイズがわかっている場合は、
数値指定でも表示範囲にフィットさせることが可能。
表示範囲が変更になる可能性がある場合などは、
「cover」などを使用する。
「background-size: cover」のサンプルコード
background-size: 画像の幅;
background-size: 30%;
*高さは 「auto」設定になる。
background-size: 幅 高さ;
background-size: 200px 100px;
/* 値 1 つの構文 */
/* 画像の幅 (高さは 'auto' になる) */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
/* 値 2 つの構文 */
/* 1 つ目の値は画像の幅、2番目の値は高さ */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
Back