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

您可以使用padding-top将#nottingham-park的大小强制为背景图像的大小。请参阅css中的注释，了解如何计算padding-top应该是什么。

通过这种方式，您的图像将具有响应性，并且永远不会超出比例。

希望这就是你要求的。

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