Html 两列布局，不同高度的图像

我正试着做一个有两列的布局。左侧为一幅图像，右侧图像的高度应为左侧图像的一半，但仍占据整个屏幕的宽度。我似乎无法使右侧的图像达到左侧图像高度的50%。顶部的边距用于清除固定标题的空间

.col{
边缘顶部：80px；
宽度：100%；
浮动：左；
}
.第一排{
宽度：60%；
}
.世界其他地区{
宽度：39.5%；
身高：50%；
}

---

我建议您使用flex布局，并将图像用作如下背景：

*{
框大小：边框框；
}
上校{
边缘顶部：80px；
显示器：flex；
高度：40vh；
边框：1px实心；
}
.第一排{
宽度：60%；
背景尺寸：封面；
背景图像：url（“https://lorempixel.com/400/400/");
}
.世界其他地区{
宽度：40%；
背景尺寸：封面；
背景图像：url（“https://lorempixel.com/400/500/");
身高：50%；
页边顶部：自动；
}

50%的左侧图像高度

两幅图像之间没有关系，因此使用

height:50%

并不意味着另一幅图像的50%。%与父元素相关父元素高度是第一个图像的高度，因为我没有给它一个固定的高度。你看到了吗，没有图像我看不到：）。。。只有当第一个图像更大时，它才是第一个图像的大小。。。如果没有指定高度，则%将不起作用，因为高度是自动的，自动表示其内容的高度，从而表示更大的图像；）我编辑了一张图片。不，我们需要代码中的图片，而不是截图