CSS - divの内側の応答背景イメージは、

Question

次のコードを取る： -

HTML：

<div id="wrapper"> 
<div id="nottingham-park"> 
</div> 

CSS：

#wrapper { 
    width: 100%; 
    height: auto; 
} 
#nottingham-park { 
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/nottingham-park.png); 
    background-size:100% auto; 
    background-repeat: no-repeat; 
    display: block; 
    //height: 700px; 
} 

FIDDLE

高さを#nottingham-parkに設定しないと、背景イメージが表示されません。高さを設定すると、応答しません。

イメージを常に100％の幅と高さに表示するにはどうすればよいですか？流体padding-bottomについて

Answer 1

あなたは、パディングトップと背景画像のサイズに＃のノッティンガム・パークのサイズを強制することができます。パディングトップがどのようにすべきかを計算する方法については、cssのコメントを参照してください。

このようにして、画像は応答性があり、比例して伸びることはありません。

希望これはあなたが求めているものです。

#wrapper { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
#nottingham-park { 
 
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/nottingham-park.png); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
    
 
    /* 
 
    width of image/height of image * width 
 
    699px/1200px * 100 = 57.7208918249 
 
    (change the 100 in this formula to whatever you want.) 
 
    */ 
 
    padding-top: 57.7208918249%; 
 
}

<div id="wrapper"> 
 
    <div id="nottingham-park"> 
 
    </div> 
 
</div>

Answer 2

EDIT

どのように？

Like this

#nottingham-park { 
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/nottingham-park.png); 
    background-size:100% auto; 
    background-repeat: n-repeat; 
    display: block; 
    padding-bottom : 55%; 
}