无法通过幻灯片显示响应式设计获得图像高度

Question

我为响应式网站创建了幻灯片，但无法让包含幻灯片的div响应性地更改高度。该网站是http://privatedorm.businesscatalyst.com/。 如果您等待幻灯片显示淡入淡出，则可以看到三个红色框。如果我可以让包含幻灯片的div继承img的高度，那么它们就会下降。但是，截至目前，高度只是最小高度：我设定的20px。

我的代码在下面？

有什么想法吗？

HTML /爪哇

<div id="content">
    <div id="homeSlides">
        <div><img src="images/homeImages-1.jpg"></div>
        <div><img src="images/homeImages-2.jpg"></div>
        <div><img src="images/homeImages-3.jpg"></div>
    </div>
    <!-- Slide Show Script -->
     <script type="text/javascript">
        $("#homeSlides > div:gt(0)").hide();

        setInterval(function() { 
          $('#homeSlides > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#homeSlides');
        },  5000);
    </script>

    <div id="fun">

    </div>

    <div id="practical">

    </div>

    <div id="quickLinks">

    </div>

</div> 

CSS

#homeSlides {
width: 100%;
max-width:1300px;
height: inherit;
min-height: 20px;
overflow:hidden;
margin: 0 auto;
z-index: 0;
}
#homeSlides > div {
position: absolute;
width: 100%;
height:inherit;
min-height: 20px;
overflow:hidden;
max-width: 1300px;
z-index: 0;
}
#homeSlides img {
width: 100%;
height: auto;
overflow:hidden;
margin: 0 auto;
position: relative;
z-index: 0;
}
#fun, #practical, #quickLinks {
float: left;
width: 30%;
height: 200px;
background-color: red;
}
#practical, #quickLinks {
margin-left: 5%;
}