html - 背景画像のサイズをその比率を維持するにはどうすればよいですか?

Question

例: http://jsfiddle.net/SJUeK/

例の背景画像を常に完全な高さ(幅に依存)にしたい。レスポンシブである必要があるため、ピクセルではできません。

それを行う方法はありますか？または、html で img を使用する必要がありますか?

前もって感謝します。

Answer 1

もちろん：

background-size: auto 100%;

これがデモです。

または、実際に「コンテナ内に収まるようにアスペクト比とスケールを維持する」ことを意味している場合background-size: containは、そのトリックを実行する必要があります。

Answer 2

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

https://css-tricks.com/perfect-full-page-background-image/