css - How to keep height of parent div with absolute positioned img inside?

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 must be position:absolute because they are subject of jquery slide show.

but, in that case div content goes to the top of page, because div #show01 has no height. It's just a blue line at the top.

So, how can I keep img position:absolute and show01 to have height as the img inside.

I cannot define div show01 height in pixels, because of keeping responsive layout.

fiddle is here

Answer 1

这是半破解（ish）.. 但您可以为#show01.

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

例子

基本上你将不得不设置一个等于图像大小的边距来取代未指定的高度。当你调整浏览器的大小时，它似乎也能响应式地工作。