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

Question

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

这是我的起始代码：

http://jsfiddle.net/LLsT8/1/

<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

image-wrapper 和 text 元素都是表格行，因此展开以填充表格的总区域。图像包装器的高度设置为 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;