覆盖整个网页的两个图像

Question

我需要创建一个完全由两张图片覆盖的网页。每张图片都有不同的大小，每张图片应覆盖页面的100％垂直空间和50％的horziontal空间（页面在垂直空间的中间分为两半）。我怎么能用html和css做到这一点？

Answer 1

使用此代码：

html, body, .image {
  height: 100%;
}

.image {
  display: inline-block;
  width: 50%;
  float: left;
  background-position: 50% 50%;
  background-size: cover;
}

.image-left {
  background-image: url(https://unsplash.it/999/999);
}

.image-right {
  background-image: url(https://unsplash.it/1000/1000);
}

<div class="image image-left"></div>
<div class="image image-right"></div>