将div直接放在未知大小的图像下方

Question

我有一个图像，意在水平占据整个屏幕，所以它看起来像这样

<img src="location" id="banner" style="width: 100%" />

有没有办法确定图片的高度？我需要使用绝对位置在其下方放置一个div容器。

Answer 1

您可以使用包装器并将元素从顶部100％定位。

<强> HTML

<div id="wrapper">
    <img src="location" id="banner" style="width: 100%" />
    <div id="positioned">testing</div>
</div>

<强> CSS

#wrapper {
    position: relative;
}
#positioned {
    position: absolute;
    top: 100%;
}

jsFiddle示例。

Answer 2

添加对jquery的引用

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>

添加此脚本

<script>
var imgHeight = $("#banner").height();
</script>

Answer 3

仅对{div}使用position:absolute;，并且不提供任何top或bottom值。