Css 两行div布局。构建灵活的布局，以适应不同的屏幕尺寸

我试图建立一个灵活的布局，应该适应不同的屏幕大小，如下图所示。 它基本上是两个div行，占据屏幕垂直大小的50%。 Top div是一个用来存放图片的容器，而Top div将显示一张传单地图。 我希望图像div保持纵横比，这样图像不会变形，ans Map div水平调整

到目前为止，我的代码是基本的，如下所示：

<div id="container">
    <div id="Top div">
        <div id='image'>Image</div>
    </div>
    <div id="Bottom div">
        <div id='map'>Map</div>
    </div>
</div>

形象
地图

我应该向每个div添加CSS样式以实现此布局，您对此有何想法

---

您可以使用Flexbox实现此布局。参考下面我的CSS，查看附件

---

如果由于某种原因无法使用flexbox，则可以轻松实现这一点。主要技巧是添加一个元素作为图像的包装，为该元素设置高度/宽度，然后将图像上的

max-width

/

max-height

设置为100%。这样，它将缩放而不变形

要实现

占据屏幕垂直尺寸的50%，可以将高度设置为50vh


#地图{
背景颜色：绿色；
身高：100%；
}
.科{
高度：50vh；
}
.img集装箱{
宽度：100%；
文本对齐：居中；
}
.样品img{
最大宽度：100%；
最大高度：100%；
}

地图
非常感谢您的建议！我将尝试适应我的代码，它比我在这里描述的要复杂一点。代码的第一次测试显示，地图和图像之间出现空白，当屏幕比图像窄时，图像会粘在屏幕顶部。有没有办法调整地图高度（即使该高度增长超过50%），使屏幕在两个元素之间没有空格？
#container {
    display: flex;
    flex-flow: row wrap;
}
#Top {
    display: flex;
    flex: 1 1 100%;
    padding-bottom: 1rem;
}
#image {
    flex: 0 1 50%;
    margin: auto;
    padding: 3rem;
    background-color: #ccc;
    text-align: center;
}
#Bottom {
    flex: 1 1 100%;
}
#map {
    padding: 5rem;
    background-color: green;
    text-align: center;
}