背景画像はウィンドウサイズでスケーリングされない

Question

基本的に私は非常に大きなイメージ（3000 x 2000以上）を持っていて、バックグラウンドイメージとして設定し、ウィンドウのサイズ変更に応じてそれに対応するようにします。しかし、それはまだ私が100％に幅を設定したときに、それも元の解像度です（右サイドでは、画面をオフにクリッピングし、隠された）に滞在したいのmax-widthにコンテナ100％

HTML

<div class="container-fluid"> 
    <div id="image-container"> 
    </div> 
</div> 

CSS

.container-fluid { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    } 

#image-container { 
    background-image: url(../img/bg.png); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
    } 

私はデフォルトの15ピクセルのパディングと、それは何の幅や高さを持っていないという事実を取り除くために編集ブートストラップの.container-fluidビットをしました。私は、ブートストラップがそれを引き起こしているかもしれないいくつかのプロパティを持っているのかどうかは確かではありませんが、デバッガを見ると計算された幅が大きいので、widthプロパティは#image-containerになります。しかし、それは私が知っているビューポートよりも大きく設定されている親を持っていません。 （容器にmax-width: 100%;を設定すると、画像が消えるだけです）

Answer 1

border-sizeのパーセントプロパティを使用してください。

html, body { 
    height: 100%; 
} 

.container-fluid { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    } 

#image-container { 
    background-image: url(https://c1.staticflickr.com/9/8270/8998617248_977cfe9d55_b.jpg); 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    background-repeat: no-repeat; 
    height: 100%; 
    } 

http://www.w3schools.com/cssref/css3_pr_background-size.asp