使用div缩放图像，其子项设置高度 [英] Scaling an image with a div, whose child sets the height

问题描述

一个div本身就是它的内容的高度。

A div, by itself, is the height of it's contents.

我想要一个div包含两个孩子：另一个div（或左对齐的图像）和无序列表（ul）。内部div（或图像）将匹配父div的高度，父div高度将符合列表的高度（可以包含任何合理数量的项目）。

I want a div to include two children: another div (or image that is left aligned) and an unordered list (ul). The inner div (or image) will match the height of the parent div, the parent div height will conform to the height of the list (which can contain any reasonable number of items).

我不确定如何设置父div的高度以匹配列表的高度，并且内部div匹配外部div的高度。

I am unsure how to set the height of the parent div to match that of the list and have the inner div match the height of the outer div. Done properly through CSS.

替代解决方案很乐意接受，这只是我试图解决我的设计目标的一种方式。

Alternate solutions are happily accepted, this is just one way I am attempting to address my design goals.

推荐答案

现场演示

• 在IE7 / IE8及最新版本的Firefox，Chrome，Safari，


• 图片的高度纯粹取决于 ul 的高度。


• 要向IE7提供所需的额外规则 height：100％，我使用的是 Star hack 。您可以使用条件注释或 Star plus hack ，如果您需要100％有效的CSS。

• Tested in IE7/IE8, and recent versions of: Firefox, Chrome, Safari, Opera.
• The height of the image is purely dependent on the height of the ul.
• To feed IE7 the required extra rule height: 100%, I'm using the Star hack. You could use conditional comments, or the Star plus hack instead if you need 100% valid CSS.

CSS ：

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="http://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>

大粉红图片：

这篇关于使用div缩放图像，其子项设置高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！