帶滾動的響應式全屏圖像

我想讓用戶訪問我的網站時僅查看一幅圖像（100％寬度），並且滾動時可以查看網站的其餘部分。帶滾動的響應式全屏圖像

我已經看到了這一點，並試圖它...它的工作原理：Full page background image with vertical scrolling

但我有兩個主要的擔憂：

通過這種方法，我必須使用的位置是：絕對低於每節圖片（我將至少有不同的4-5部分內容）。這是正確的做法嗎？
這種方法似乎沒有反應，有沒有辦法做到這一點？

來源

2014-01-27 user2013488

你是指[this]（http://www.flickr.com/new/）？ –

是的，但寬度和高度必須是100％ – user2013488

你嘗試過'html，body {width：100％;身高：100％; }'？然後在每個部分，你只需要包含一些東西，'.myDiv {width：100％;高度：100％}，這將是整個視圖端口。 –

您根本不必使用位置。一旦您使用屏幕尺寸設置div的大小，您的所有內容的其餘部分都將低於此值。

在這裏你去：example

的image DIV將包含你的形象，你把它設置爲width: 100%和height: 100%

然後，只需添加這個div下方的內容。

HTML：

<div class='image'> 
    <img src="image.jpg" /> 
</div> 
<div class='content'>Content</div>

CSS：

html, body{ 
    margin: 0; 
    height: 100%; 
} 

.image{ 
    width:100%; 
    height:100%; 
    background: green; 
} 

.image img{ 
    width:100%; 
    height:100%; 
} 

.content { 
    width:100%; height: 100px; 
}

您還需要添加

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

支持所有屏幕尺寸。

來源

2014-01-27 16:11:58

謝謝，我已經試過了，它一般工作。問題是圖像變得稍大一點，屏幕和滾動條被顯示，我不想那樣。有沒有辦法刪除它？ – user2013488

你在img css中嘗試過'overflow：hidden'嗎？無論如何，在這個結構中它不應該發生。你是否將填充和邊距設置爲0？你是否將img邊框設置爲0？ –

明白了，問題出現了，因爲div class =「image」在我的代碼中（該標籤沒有任何樣式）標籤。當我刪除滾動條消失的部分時，但我不知道爲什麼此問題首先出現。溢出：隱藏;似乎沒有工作，邊距，填充和邊框是0 – user2013488

試試這個：http://jsfiddle.net/stddC/

這樣的圖像將是100％height和width，不會與內容混亂。

來源

2014-01-27 16:13:55

帶滾動的響應式全屏圖像

回答

相關問題