Javascript 两个div，一个在另一个之下，一个动态，第二个填充其余的空间

我有一部500x500的

我需要在那个div内创建两个div，一个在另一个上面。其中一个顶部必须是动态的，高度基于内容文本。第二个必须填充剩余的空间，并根据该div的大小生成动态图像，同时保持纵横比。有人知道如何做到这一点吗？我认为仅使用css是不可能的，所以如果您有任何建议可以用javascript解决这个问题，那么我将非常感谢

示例：

---

所有这些都完全可以通过CSS实现。这将需要对属性

flex

进行一些调整。以下是关于如何正确使用

flex

的最佳教程/说明

为了确保您的图像高度相对于父级

div

，您只需在图像上定义一些百分比高度，宽度将自动缩放

例如

---

将

display:flex

交给外部容器。然后，您可以为第一个元素定义一个恒定高度，并为第二个元素指定

flex:1

。这将使第二个元素增长为空白。您的图像仍将相应调整大小

我认为固定父元素的高度和宽度会导致子元素溢出

这是一个JSFIDLE，具有动态的父级高度和宽度，可以按照您的期望工作

.parent{
背景颜色：黄色；
填料：2米；
宽度：100%；
显示器：flex；
弯曲方向：立柱；
}
.孩子{
高度：自动；
}
#孩子1{
弹性：1；
背景色：红色；
填充：0.5em；
}
#孩子2{
弹性：1；
背景颜色：蓝色；
填充物：1em 1.5em；
文本对齐：居中；
}
#儿童2 img{
保证金：0自动；
身高：90%；
宽度：90%；
}

sometest sometest sometest sometest sometest sometest
sometest sometest sometest sometest sometest sometest
有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试有些测试sometestsometestsometestsometestsometestsometestsometestsometestsometestsometestsometestsometestsometest

$（函数（）{
$（“#内”）.width（$（“#内”）.height（）；
})

div{
颜色：白色；
填充：10px；
文本对齐：居中；
}
div div{
利润率：10px；
}
#外面{
背景：rgb（200200,50）；
高度：500px；
宽度：500px；
显示器：flex；
弯曲方向：立柱；
}
#顶{
背景：rgb（255,0,0）；
}
#底部{
背景：rgb（0100100）；
柔性生长：1；
显示器：flex；
证明内容：中心；
}
#里面{
背景：rgb（0200,0）；
}

此处的内容

asdf

asdf

asdf

adsf

这是一个不错的问题，但您可能希望包括一些您已经尝试过但尚未奏效的内容，并解释错误所在。这实际上是一个评论，而不是答案。谢谢。添加更多内容以更好地解释。酷？谢谢！这是最接近的答案，但静态图像不可调整大小。我刚刚添加了高度和宽度均为100%的图像容器，以及内部最大高度和最大宽度均为100%的图像。小提琴：