Question

我正在尝试使用contain对background-size进行响应，但高度始终为0.我在父元素上设置了高度，我缺少什么？

.masthead .container {
  height: 300px;
}
.masthead-title {
  margin-top: 0;
  margin-bottom: 0;
  color: #505050;
  background-image: url('../logo.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
  <div class="masthead">
    <div class="container">
      <label for="sidebar-checkbox" class="sidebar-toggle"></label>

      <h3 class="masthead-title">
        <a href="/" title="Home"></a>
      </h3>
    </div>
  </div>

Answer 1

问题在于，您为背景图片使用的<h3>标记的高度为零。因此，要么将.masthead-title设为固定高度，要么将一些内容放入<h3>或<a>内。

选项1：具有属性background-image

的元素上的固定高度

.masthead-title {
  height: 300px;
}

选项2：具有background-image属性的元素内的内容

 <h3 class="masthead-title">
   <a href="/" title="Home">Test Test Test</a>
 </h3>

选项3：保持容器上的固定高度，并将子容器的background-image属性设置为100％height

.masthead .container {
  height:300px;
}
.masthead-title {
  height:100%;
}

Answer 2

您需要为.masthead-title指定一个高度。

.masthead .container {
    height: 300px;
    border: 1px dashed gray;     /* for demo only */
}

.masthead-title {
    margin-top: 0;
    margin-bottom: 0;
    color: #505050;
    background-image: url('http://i.imgur.com/60PVLis.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    height: 100%;                /* new */
}

<div class="masthead">
    <div class="container">
        <label for="sidebar-checkbox" class="sidebar-toggle"></label>
        <h3 class="masthead-title">
        <a href="/" title="Home"></a>
      </h3>
    </div>
</div>

background-size：包含高度始终为0

2 个答案:

jsFiddle