html - 使用div缩放图像，其子级设置高度

div本身就是它内容的高度。
我希望一个div包含两个子元素：另一个div（或左对齐的图像）和一个无序列表（ul）。内部div（或图像）将与父div的高度匹配，父div的高度将与列表的高度一致（可以包含任何合理数量的项）。
我不确定如何设置父div的高度以匹配列表的高度，以及如何通过CSS使内部div与外部div的高度匹配。
替代的解决方案被欣然接受，这只是我试图解决我的设计目标的一种方式。

最佳答案

Live Demo
在IE7/IE8中测试，最新版本：Firefox、Chrome、Safari、Opera。
图像的高度完全取决于ul的高度。
为了给IE7提供所需的额外规则height: 100%，我使用了Star hack。如果需要100%有效的CSS，可以使用conditional comments或Star plus hack。
CSS:

#iContainer {
    background: #ccc;
    overflow: hidden;
    position: relative
}
#iContainer div {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    *height: 100% /* just for you, IE7 */
}
#iContainer img {
    height: 100%
}
#iContainer ul {
    float: right
}

HTML格式：

<div id="iContainer">

    <div><img src="https://dummyimage.com/500x700/f0f/fff" /></div>

    <ul>
        <li>list 1</li>
        <li>list 2</li>
        <li>list 3</li>
        <li>list 4</li>
        <li>list 5</li>
        <li>list 6</li>
        <li>list 7</li>
        <li>list 8</li>
    </ul>

</div>

大粉色图片：

关于html - 使用div缩放图像，其子级设置高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5224885/