主圖像高度總是大約是窗口大小的75％？

Question

http://www.apple.com/sg/

有一個巨大的圖像，它會自動調整大小，使其始終大約爲窗口高度的75％。

這是如何完成的？

我發現了一個CSS媒體查詢，但我只能發現這個一個：

@media only screen and (max-width: 1068px), only screen and (max-height: 800px) { 
    .page-home .billboard.evergreen { 
     height: 50%; 
     min-height: 630px; 
    } 
} 

如何瞭解不同分辨率其他媒體查詢？

Answer 1

最簡單的方法是：

.item 
 
{ 
 
    height: 75vh; 
 
    background-color: blue; 
 
}

<div class="item"></div>

這些所謂的viewport units。他們是supported不錯。

您也可以嘗試在此用例中使用vmax。這將始終保持較大值vw或vh。