Как сохранить высоту родительского div с абсолютным позиционированием img внутри?

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

Это пол-хак (МОГ) .. но вы можете установить предел для #show01.

Попробуйте margin-bottom:24%; .. см. Пример и дайте мне знать, если это то, к чему вы стремились.

Example

В основном вы будете иметь, чтобы установить предел, равный размеру изображения, чтобы сместить энную высоту .. Это похоже на работу отзывчиво при изменении размера браузера тоже ..