如何用绝对定位的img保持父div的高度？

Question

<div id="show01">
<img src="https://www.google.com/images/srpr/logo4w.png">
<img src="https://www.google.com/images/srpr/logo4w.png">
<img src="https://www.google.com/images/srpr/logo4w.png">
</div>

<div id="content"></div>

CSS

#show01{ 
    margin-top:14px; 
    position: relative;
    height:auto;
    border:thin solid blue;
}
#show01 img { 
  position: absolute;
    max-width:70%;
}
#content{
    background:#999;
    height:45px;
}

img 必须是 position:absolute，因为它们是 jquery 幻灯片放映的主题。

但是，在这种情况下 div content 会转到页面顶部，因为 div #show01 没有高度。它只是顶部的一条蓝线。

那么，我怎样才能保持 img position:absolute 和 show01 的高度与内部的 img 一样。

由于保持响应式布局，我无法以像素为单位定义 div show01 高度。

小提琴是here

Answer 1

这是半破解（ish）.. 但您可以为 #show01 设置边距。

试试margin-bottom:24%;.. 查看示例，让我知道这是否是您的目标。

Example

基本上，您将不得不设置与图像大小相等的边距以取代未指定的高度。当您调整浏览器大小时，它似乎也可以响应式工作..