父层的div如何随子层div的高度变化而变化？

Question

在一个父层div里放了一个子层div，子层里放一个ul，中有些一些图片使用img包裹的。由于img具有自动缩放的效果，所以子层的div是可以随着img的大小进行变化的，但是如何父层div不设置height的话，整个图片则无法显示，设置一个具体值的话，当屏幕变化时图片有显示缺失的问题，要怎么设置才能让父层的div随着子层的div的高度进行变化那？
html代码如下：

<div class="img_gallery">
<div class="main_img">
        <ul>
            <li><img src="img/img_main_1.jpg"></li>
            <li><img src="img/img_main_2.jpg"></li>
            <li><img src="img/img_main_3.jpg"></li>
            <li><img src="img/img_main_4.jpg"></li>
            <li><img src="img/img_main_5.jpg"></li>
        </ul>
        <a href="javascript:;" id="btn_prev"></a>
        <a href="javascript:;" id="btn_next"></a>
    </div>
</div>

css代码如下：

.img_gallery{
    /*height:422px;*//*固定高度的话，宽度变化后，图片的高度上有损失，有些内容无法显示*/
    height: 100%;/*加上这个，就可以适应高度了。是的img_gallery而已随着图片的大小进行变化，但是这样设置的话，会使整体太高，point的定位出错*/
    border-top:1px solid #d7d7d7;overflow:hidden;position:relative;}
.main_img{
    overflow:hidden;
}
.main_img ul{
}
.main_img li{float:left;width:100%;
    /*height:422px;*/
}
.main_img li img{
    width: 100%;/*这样图片的宽度就是整个画面的宽度，img具有自动缩放的特效*/
}

Answer 1

做自适应的话，可以把li display:none掉，一开始让第一个显示。之后点击用js来计算当前图片index再把上一张或下一张给block出来。

.main_img li:first-child {
    display: block;
}

Answer 2

.main_img ul{
    overflow:auto;
}

我本地这样可以

Answer 3

设置min-height呢