CSS - 具有背景的响应式 div

Question

我有以下内容:-

<div id="join-container"></div>

    #join-container {
        position: relative;
        width: 100%;
        height: 600px;
        background: url(../img/work-for-us-header.jpg);
    }

我想让它具有响应性，以便在我缩小浏览器时调整高度，我尝试删除宽度和高度并添加 background-size: 100%;但这不显示任何图像。

无法理解我做错了什么。

Answer 1

您可以使用padding-bottom 但是您必须确定图像的纵横比。

padding-bottom 是相对于容器的宽度。因此，如果您的图片的宽高比是 16:9，那么您的容器应该是:

#container {
  width: 100%;
  padding-bottom: 56.25%; /* 9/16 = .5625 */
  background: transparent url('http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg') no-repeat center;
  background-size: 100%;
}

https://jsfiddle.net/awqbLukm/

当您调整浏览器大小时，您的 padding-bottom 将根据容器的宽度按比例调整大小。

现在如果你想在这个盒子里放一些其他的内容，你可以创建另一个 div 绝对定位在这个 #container 里面并设置它的 宽度和高度到100%。