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

Question

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

4

我有一个固定高度的容器。里面有两个子元素：图像和任意长度的文本。我希望文本可以占用所需的高度，图像可以自动调整到剩余空间。

这是我现在的代码起点：

<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/

- Paker

你需要支持哪个最老的浏览器？使用CSS中的flexbox属性（只使用CSS，不是附加组件）可以轻松实现这一点，但它不支持ie10之前的IE浏览器。 - Deborah

@DeborahSpeece，非常有趣，但是使用flexbox真的可以实现吗？你能提供一个代码示例吗？谢谢。 - Paker

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bfuoco · Accepted Answer

我建议使用display属性的table和table-row值来实现此功能。

image-wrapper和text元素都是表格行，因此会扩展到填充整个表格的区域。image-wrapper设置为高度100％，因此它会占用剩余空间。

图像元素嵌套在image-wrapper中，并设置为宽度/高度100％，因此它采用与其父元素相同的尺寸。

这里有一个fiddle： 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;
}

更新

这个方法在Firefox/IE上无法正常工作。针对这个问题，您可以使用背景图像来替换实际的图片，并使用background-image属性。请注意，您还必须将图像设置为table-cell；否则ie将不会呈现表格。

下面是一个示例，它不会拉伸图像。

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;