父层的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代码如下：

Answer 1

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