使用绝对定位的图片定义div高度？

Question

我在一个 div 中使用了绝对定位的图片，我希望该 div 的高度由该图片定义。但是，由于图片启用了绝对定位，我无法实现这一点。最终，我将在此 div 中使用多个绝对定位的图片，这就是我采取这种方法的原因。有什么想法吗？

HTML：

<div class="image">
    <img class="image1" src="image1.jpg" />
</div>

CSS（层叠样式表）：

.image {
  position:relative;
}
.image1 {
  width:100%;
  position:absolute;
}

谢谢！

- user13286

---

如果您的div只是用于容纳图像，那么最好将该图像设置为该div的背景。https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-image - Prabhu Murthy

谢谢您的回复，实际上我将在这个 div 中放置多个绝对定位的图像，这就是我采用这种方式的原因。 - user13286

Answer 1

我最终使用jQuery解决了这个问题。在文档加载时，将包含div的高度设置为图像的高度，我还使用Foundation，因此我添加了一个调整大小事件来随着窗口缩小而更改div的高度。

<script type="text/javascript">
$(document).ready(function() {
    var imageHeight = $(".image1").height()
    $(".image").css('height',imageHeight);
});
$(window).resize(function() {
    var imageHeight = $(".image1").height()
    $(".image").css('height',imageHeight);
});
</script>

- user13286

---

这对我不起作用，但当我使用$(window).load()时它可以工作！如果其他人也遇到问题，请尝试window.load。 - oompahlumpa