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％宽度和自动高度？

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

编辑

怎么样液padding-bottom？

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%; 
}