如果（图像位置：固定），将div高度设置为与流体图像高度相同

Question

我试图在顶部创建具有固定图像的响应行为，并希望实现以下内容捕捉到包含图像的div的底部，但是具有position：fixed的图像没有给div的高度，你能指出我有什么问题吗？如果还有其他方法可以实现这个目标吗？

.slider {
  height: auto;
  width: 100%;
}
.image {
  width: 100%;
  position: fixed;
  z-index: -1;
  top: 0;
}
.content {
  height: 1100px;
  background-color: black;
  width: 100%;
  z-index: 100;
  margin-top: 350px;
  position: relative;
}

<div class='slider'>
  <img class='image' src='http://s2.postimg.org/vmnzo6e0p/top.jpg'>
</div>

<div class='content'>
</div>

我希望实现的远期图表。

Answer 1

也许您正在使用JQuery寻找类似的东西：https://jsfiddle.net/9hmyr40w/

CSS：

body{
    margin: 0px;
}

.slider {
    height: auto;
    width: 100%;
}

.image {
    width: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
}

.content {
    height: 1100px;
    background-color: black;
    width: 100%;
    z-index: 100;
    position: relative;
}

JQuery的：

$(window).on("load resize", function() {
    var imageBottom = $(".image").height() - 15 
    $(".content").css("top",imageBottom)
})