Question

我有一个固定高度的容器。里面有两个孩子：图像和下面任意长度的文字。我希望文本获取所需的高度，并使图像自动调整到剩余空间。

这是我的起始代码：

<div id="parent">
<div>
    <img src="http://placehold.it/250x250&amp;text=2" />
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut </div>
</div>

这是JavaScript解决方案，但我想知道它是否只能用于CSS。

http://jsfiddle.net/LLsT8/2/

更新 bfuoco的解决方案非常接近我所需要的，但它在Firefox中不起作用。

http://jsfiddle.net/8S6Kf/1/

Answer 1

我建议您使用table属性的table-row和display值。

图像包装器和文本元素都是表行，因此展开以填充表的总面积。图像包装器的高度设置为100％，因此它占用了剩余的空间。

图像元素嵌套在图像包装中，并设置为宽度/高度100％，因此它与其父图像具有相同的尺寸。

这是一个小提琴： http://jsfiddle.net/8S6Kf/1/

<强> HTML

<div class="parent">
    <div class="image-wrapper">
        <img class="image" src="http://placehold.it/250x250&amp;text=2" />
    </div>

    <div class="text">
        A line of text.
    </div>
</div>

<强> CSS

.parent {
    display: table;
    height: 250px;
    width: 250px;
}

.image-wrapper {
    display: table-row;
    height: 100%;
}

.image {
    width: 100%;
    height: 100%;
}

.text {
    display: table-row;
}

<强>更新

这对FF / IE无效。对于此特定问题，您可以使用div替换实际图像并使用background-image属性。请注意，您还必须使图像成为表格单元格;否则即不会呈现表格。

以下是一个不拉伸图像的示例。

http://jsfiddle.net/8S6Kf/7/

HTML

<div class="image"></div>

CSS

.image {
    display: table-cell;
    height: 100%;
    width: auto;

    background-image: url(http://placehold.it/250x250&amp);
    background-size: 100% 100%;
}

如果要保留图像的尺寸，您也可以使用以下背景属性：

background-size: contain;
background-repeat: no-repeat;

如何使用CSS根据它的兄弟大小动态调整HTML元素的大小？

1 个答案: