兩張圖片覆蓋整個網頁

Question

我需要製作一張完全由兩張圖片覆蓋的網頁。每張照片都有不同的尺寸，每張照片應覆蓋垂直空間的100％和頁面的垂直空間的50％（頁面在垂直空間中間分成兩半）。我如何使用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>