如何仅使用 CSS 根据其同级大小动态调整 HTML 元素的大小？

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

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

image元素嵌套在image-wrapper中，宽度/高度设置为100%，因此它的尺寸与父元素相同。

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

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

.parent {
    display: table;
    height: 250px;
    width: 250px;
}
.image-wrapper {
    display: table-row;
    height: 100%;
}
.image {
    width: 100%;
    height: 100%;
}
.text {
    display: table-row;
}

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

.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;