html - 将 div 高度设置为与流体图像高度相同，如果(图像位置 : fixed)

Question

我正在尝试使用顶部的固定图像创建响应行为，并希望实现以下内容捕捉到包含图像的 div 的底部，但位置为 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)
})