有一个响应式的屏幕，两个图像占50%的高度

<div class="container">
  <div class="image"></div>
  <div class="image"></div>
</div>

.container {
  display: flex;
  height: 100vh; /* 设置容器高度为视口高度 */
}

.image {
  flex: 1; /* 图像占据相等的空间 */
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}

.container {
  display: grid;
  grid-template-columns: 1fr; /* 列宽度平均分配 */
  grid-template-rows: 1fr 1fr; /* 行高度平均分配 */
  height: 100vh; /* 设置容器高度为视口高度 */
}

.image {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}