[解決済み] CSSで背景画像を幅に合わせ、高さは比例して自動縮小する

質問

私は

body {
    background: url(images/background.svg);
}

例えば、オリジナルの画像が100*200（単位は任意）で、ボディの幅が600pxの場合、背景画像は1200pxの高さになるはずです。ウィンドウサイズが変更された場合、高さは自動的に変更される必要があります。これは可能でしょうか？

今のところ、Firefoxは高さを合わせてから幅を調整しているように見えます。これはおそらく、高さが最も長い寸法であるため、トリミングを回避しようとしているのでしょうか？I 欲しい を縦に切り出し、スクロールする。水平方向の繰り返しはしない。

また、Chrome では、次のような場合でも、画像が中央に配置され、繰り返しはありません。 background-repeat:repeat を明示的に指定します（いずれにせよデフォルトです）。

どのように解決するのですか？

このための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

悪いダジャレで申し訳ないのですが、今回は 今日の一枚 by Biswarup Ganguly をデモします。これがあなたの画面であり、灰色の部分はあなたの見える画面の外側にあるとしましょう。デモンストレーションのため、16x9の比率を想定しています。

前述した当日の写真を背景に使いたいのです。しかし、何らかの理由で画像を4x3にトリミングしています。を設定すればいいのですが background-size プロパティに何らかの固定長を設定する必要がありますが、ここでは contain と cover . の幅や高さを変更していないと仮定していることにも注意してください。 body .

contain

contain

画像を、その固有のアスペクト比（もしあれば）を維持したまま、その幅と高さの両方が背景の配置領域に収まるような最大のサイズに拡大縮小する。

これにより、背景画像は常に背景配置領域に完全に収まるようになりますが、空いたスペースに background-color この場合

cover

cover

画像を、その固有のアスペクト比を保ちながら、その幅と高さの両方が背景の位置決め領域を完全にカバーできる最小のサイズに拡大縮小する。

これにより、背景画像がすべてを覆っていることが確認できます。このため background-color しかし、画面の比率によっては、画像の大部分が切り取られる可能性があります。

<イグ

実際のコードによるデモ

div > div {
  background-image: url(http://i.stack.imgur.com/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>&lt;div&gt;</code>.</p>
</div>