使圖像適合全屏沒有滾動條

Question

我需要做一個標題圖片全屏。我嘗試這樣做：

<div class="wrapper"> 
    <img src="images/image1.jpg" class="img-responsive" alt="Responsive image"> 
</div> 

但這裏是圖片：

不知何故仍然窗口需要向下滾動，你可以看到，我怎麼能解決這個問題，以適應屏幕？

Answer 1

試試這個：

.img-responsive { background-size: 100%; } 

OR

.img-responsive { background-size: cover; } 

OR（根據修訂後的問題）

一下添加到body：

overflow: hidden; 

Answer 2

而不是img標記，使用background-image獲取全屏圖像。

<header> 
    <div class="menu_area">...</div> 
</header> 


html, body, header { 
    height: 100%; 
} 
header { 
    background-image: url('images/image1.jpg'); 
    background-size: cover; 
}