html - 包含图像和其他 2 个 div 的 div 的大小

Question

我的 HTML:

<div class="container-fluid">
  <div class="row">
    <div class="header-img">
      <img src="test_bg.jpg" class="bg" />
    <div class="col-xs-2 col-xs-offset-1 logo"></div>
    <div class="col-xs-5 col-xs-offset-3 logo"></div>
  </div>
</div>

CSS:

$test-color : red;

.header-img {
  width: 100%;
  height: auto;
}

.bg {
  width: 100%;
  height: auto;
  display: block;

}

.logo {
  background-color: $test-color;
  position: absolute;
  height: 100px;
  z-index: 2;
}

结果如下:

我想要什么:

标题 div 具有它包含的图像的大小，另外两个 div 位于其顶部的图像上。

问题是，如果我将 img 设置为绝对，则两个 div 位于顶部，但标题 div 没有图像的大小。

可以同时拥有吗？

Answer 1

为什么不用 position:absolute 的容器包裹红色 div？

像这样？

.header-img {
  width: 100%;
  height: auto;
}

.bg {
  width: 100%;
  height: auto;
  display: block;

}

.s {
  position:absolute;
  top:0;
  left:0;
  width:100%;
}

.logo {
  background-color: red;
  position: absolute;
  height: 100px;
  z-index: 2;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="header-img">
      <img src="http://i.stack.imgur.com/6MqG7.jpg" class="bg" />
      <div class="s">
        <div class="col-xs-2 col-xs-offset-1 logo"></div>
        <div class="col-xs-5 col-xs-offset-3 logo"></div>
      </div>
    </div>
  </div>
</div>