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

你没有使用好的方法，像这样的情况我们不使用图像通过图像标签。你应该使用像

这样的背景图片

.header-img{
background-image: url("test_bg.jpg");
height: 700px; /*put height of your image here*/
background-size: cover; 
}

现在你不需要将绝对位置应用于你的两个div。将上面的样式放在css中并确保图像的路径正确

希望它会有所帮助感谢

Answer 2

你应该准备一个jsfiddle，但是制作.header-img position：relative，然后将.logo的bottom或top属性设置为你想要的。

.header-img { position: relative;}
.logo { bottom: 0px;}

问题是你需要为.logo div设置左或右，因为它们会相互重叠。（例如，你可以设置左：15px用于左边和右边：15px到右边）

https://jsfiddle.net/ivankovachev/wodpdrzq/

Answer 3

您可以position您的父标题元素relative和position您的图片absolute，以便红色div来到图像上。

.header{
    position: relative;
    width: 100%;
    height: auto;
}

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

}

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

在这里查看一个工作小提琴：Fiddle

Answer 4

为什么不用包含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>

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

4 个答案: