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

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布局并将图像用作这样的背景：

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;