私は持っている
body {
background: url(images/background.svg);
}
望ましい効果は、この背景画像の幅がページと同じになり、高さが比率を維持するために変更されることです。たとえば、元の画像が 100 x 200 (任意の単位) で、本体の幅が 600 ピクセルの場合、背景画像の高さは 1200 ピクセルになります。ウィンドウのサイズが変更されると、高さは自動的に変更される必要があります。これは可能ですか?
現時点では、Firefox は高さを合わせてから幅を調整しているように見えます。これはおそらく、高さが最も長い寸法であるため、切り取りを避けようとしているからでしょうか?垂直に切り取ってからスクロールします。水平方向の繰り返しはありません。
また、Chrome は、明示的に指定された場合でも、画像を中央に配置し、繰り返しません。background-repeat:repeatこれはデフォルトです。
ベストアンサー1
これに対応するCSS3プロパティがあります。background-size（互換性チェック) 長さの値を設定することもできますが、通常は特殊な値containおよびとともに使用されますcover。特定のケースでは、 を使用する必要がありますcover。
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
エッグスプランテーションcontainとcover
駄洒落で申し訳ないですが、ビスワルプ・ガングリーによる今日の写真デモンストレーション用です。これがあなたの画面で、灰色の領域が表示されている画面の外側にあるとします。デモンストレーション用に、16x9 の比率を想定します。
前述の今日の写真を背景として使用します。ただし、何らかの理由で画像を 4x3 にトリミングしました。 プロパティを固定長に設定することもできますが、ここではとbackground-sizeに焦点を当てます。 の幅や高さを変更していないことも前提としています。containcoverbody
contain
contain画像の固有のアスペクト比（存在する場合）を維持しながら、幅と高さの両方が背景配置領域内に収まる最大サイズに画像を拡大縮小します。
これにより、背景画像が常に背景配置領域に完全に含まれるようになりますが、background-color次の場合には空白のスペースが残る可能性があります。
cover
cover画像の固有のアスペクト比（存在する場合）を維持しながら、幅と高さの両方が背景配置領域を完全にカバーできる最小サイズに画像を拡大縮小します。
これにより、背景画像がすべてをカバーします。 は表示されませんbackground-colorが、画面の比率によっては、画像の大部分が切り取られる可能性があります。
実際のコードを使ったデモンストレーション
div > div {
background-image: url(https://i.sstatic.net/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #ccc;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain {
background-size: contain;
}
div.cover {
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div > div {
margin: 0 1ex 1ex 0;
float: left;
}
div + div {
clear: both;
border-top: 1px dashed silver;
padding-top:1ex;
}
div > div::after {
background-color: #000;
color: #fefefe;
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code><div></code>.</p>
</div>