由具有绝对定位的图像定义的 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;
}

谢谢！

Answer 1

我最终用 jQuery 解决了这个问题。在文档加载时，包含 div 的高度设置为图像的高度，我也在使用 Foundation，所以我添加了一个 resize 事件来更改 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>