image - 两个 DIV 层：根据底部 DIV 的动态高度调整顶部 DIV 的大小

Question

我有两个 DIV 层，一个在另一个之上。在顶部 DIV 中，有一个图像，在底部 DIV 中，有一个文本块。底部 DIV 中的文本数量会发生变化，从而增加和减少所需的高度。我需要根据底部需要多少高度来动态降低顶部 DIV 中图像的高度。我正好有 600px 的垂直空间可用。

例如：如果底部 DIV 需要 200px 高度，我需要将图像高度更改为 400px。如果底部 DIV 需要 300px 高度，我需要将图像高度更改为 300px。

我知道我可以将图像高度设置为顶部 DIV 的 100%，从而允许它根据需要扩展或收缩。问题是我需要底部 DIV 能够自由扩展，并让顶部 DIV 做出相应的反应。换句话说，我不能有一个固定的高度。

<div id="topdiv">
<img src="example.png" alt="This image needs a height based on the bottom div" />
</div>
<div id="bottomdiv">
This text needs to be able to expand or contract freely
</div>

任何人都可以帮忙吗？