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

Question

我正在尝试制作一个包含两列的布局。左边是一张图片，右边的图片应该是左边图片高度的一半，但仍然占据屏幕的整个宽度。我似乎无法将右侧的图像设为左侧图像高度的 50%。顶部的边距是为固定标题留出空间。

.col {
  margin-top: 80px;
  width: 100%;
  float: left;
}

.row-l {
  width: 60%;
}

.row-r {
  width: 39.5%;
  height: 50%;
}

<div class="col">
  <img class="row-l" src="cover.jpg" style="max-width: 100%;">
  <img class="row-r" src="phone.jpg" style="max-width: 100%;">
</div>

Answer 1

我建议你使用 flex 布局并像这样使用图像作为背景:

* {
  box-sizing: border-box;
}

.col {
  margin-top: 80px;
  display: flex;
  height: 40vh;
  border: 1px solid;
}

.row-l {
  width:60%;
  background-size: cover;
  background-image:url("https://lorempixel.com/400/400/");
}

.row-r {
  width:40%;
  background-size: cover;
  background-image:url("https://lorempixel.com/400/500/");
  height:50%;
  margin-top:auto;
}

<div class="col">
  <div class="row-l" ></div>
  <div class="row-r"></div>
</div>