響應背景 - 想要100％的高度爲首頁，但圖像不包括在手機尺寸

#home 
    height: 100% 
    width: 100% 
    background-image: url("/lib/img/home.jpg") 
    background-position: center center 
    background-repeat: no-repeat 
    background-attachment: fixed 
    background-size: cover

只是如此你知道，我使用SASS爲我的CSS。響應背景 - 想要100％的高度爲首頁，但圖像不包括在手機尺寸

的問題是我希望我家的着陸頁是全屏幕尺寸和響應，我有工作在全畫面精美，但在手機大小的它的高度不適合整個屏幕風景圖像。有更好的解決方案嗎？

來源

2017-09-06 Michael Hands

img_background { 
     max-width: 2000px; // maximum width for the backgound pic 
     min-width: 100px; // for mobile phones in portrait view 
     position: absolute; 
    }

該代碼會應答，所以當您調整在PC瀏覽器窗口，將圖像尺寸調整到瀏覽器的寬度。在移動設備上，整個圖像將出現。

我希望這有助於！

（編輯：這是CSS）

來源

2017-09-06 15:14:32 EgMusic

感謝。我給了這個去，但我不知道如何使它工作！我會嘗試上傳我嘗試創建的網頁示例。 –

Okey dokey！我會找的！ – EgMusic

您可以使用引導程序做你的元素響應。這樣，元件尺寸會隨着分辨率的屏幕變化：

使用.container爲響應固定寬度的容器。

<div class = "container"> 
    ... 
</div>

或者：

<div class = "container-fluid"> 
    ... 
</div>

或者：

<div class = "container"> 
    ... 
</div>

或者：

<img class="img-responsive" src="your_image.jpg">

有使用引導更多的解決方案，但基本的有這些。

檢查此鏈接瞭解更多信息：

Bootstrap

來源

2017-09-06 15:23:15

感謝您的回覆！我認爲我能夠使圖像響應寬度已經看起來，當屏幕尺寸很小時，圖像僅覆蓋屏幕的寬度，因爲它是一個橫向圖像。 –

歡迎。當屏幕很小時，您可以通過媒體查詢定義圖像的另一個寬度和高度。 Bootstrap使用容器和img響應 –

謝謝。我早些時候嘗試過媒體查詢，但遇到了一些問題，我確信我很快就會弄清楚哈哈！你也知道我可以如何上傳我的代碼的實例嗎？我認爲這將是一個更好的主意，在未來的幫助:) –

#home{ 
    height: 100vh; 
    width: 100%; 
    float: left; 
    background-image: url("/lib/img/home.jpg"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    /*Note background attachment fixed not work in mobiles accurately like ios and also on ipads... 
    USe background attachment scroll for the same...*/ 
    background-size: cover; 
}

來源

2017-09-06 16:30:18

你應該在你的代碼中添加一些解釋。 – BakaWaii

即時通訊不知道左邊是我的正確選擇..請參閱我的小提琴.. https：// jsfiddle。net/michaelhands/9eq38tu6/ –

是的，你是對的... 這將工作 background-size：封面將不會按照小提琴工作... 你必須給背景大小：200％自動;根據媒體查詢.. @media all和（max-width：767px）和（orientation：portrait）{ \t //不同的動畫代碼在這裏。,,，覆蓋這裏... like ,,, \t //使用... \t body #home { \t \t -webkit-animation：breath2 10s linear infinite; \t \t動畫：breath2 10s linear infinite; \t \t -moz-animation：breath2 10s linear infinite; \t} } –

響應背景 - 想要100％的高度爲首頁，但圖像不包括在手機尺寸

回答

相關問題