拉伸到第一整版調整IMG

Question

我做了一個簡單的第一頁，但我想內容開始在第二頁上，只要用戶滾動

當前實現不跨瀏覽器/跨optimimal設備情況（平板電腦，手機，桌面......）。有沒有簡單的方法來調整或實施它？

我已經創建了the simple example here，它作爲第一個實驗並不差，但它也不好。

正如你所看到的，黑色的部分是第二頁..所以不應該是可見的開始..

<h3>This is the html code</h3> 
<div class="container body-content"> 
<div class="row page" id="first-page"> 
    <div class="col-md-12 text-center"> 
     <h1>MemberPop</h1><hr> 
     <h3>Superkrachten om uw leden en betalingen te beheren.</h3><hr> 
     <img id="popeyeIMG" src="http://membershipmanagement.azurewebsites.net/Images/Backgrounds/Popeye.jpg"><br>          <br> 
     <a class="btn btn-primary" href="/Account/Register">Probeer het gratis</a> <br> 
     of <a class="" href="/Account/Login">Log in</a> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-12"> 

    </div> 
</div> 

而這裏的簡單的腳本來調整圖像大小：

var clientHeight = $(window).height(); 
var firstPage = $("#first-page").height(); 
if (clientHeight < firstPage) { 
    var Relation = (firstPage/clientHeight) * 1.3 ; 
    $("#popeyeIMG").height($("#popeyeIMG").height()/Relation); 
} 

，我應該提高頁面的第一部分延伸到在任何情況下（手機，平板電腦，臺式機）的整版什麼有什麼建議？

Answer 1

你可以做$("#first-page").height(clientHeight);在你的js文件的末尾

我還要補充一些媒體查詢，以適應您的H1和H3（以及可能的#popeyeIMG而不是使用關係限定它的）

這樣

@media screen and (max-height: 600px) { 
    h1 { 
     font-size: 0.8em; 
    } 
    h3 { 
     font-size: 0.8em; 
    } 
}