響應式背景圖像 - 引導jumbotron與Ruby on Rails

我一直在尋找相當長的一段時間，在這一點上覺得我是在浪費它而不會呈現我目前的狀況。我正在嘗試爲具有自適應背景圖片的網站創建着陸頁。我沒有與圖像寬度的響應性問題。它將擴展並響應Web瀏覽器的縮放。但是，我無法讓它適應網絡瀏覽器的高度。事實上，它只能從瀏覽器的頂部向下約1英寸，並且沒有更多。我已經看過很多解決方案，但大多數都提出了我已經完成的工作。作爲一方不，我試圖用Rails來做到這一點。我創建了一個root static-page#home，並在home.html.erb和static_pages.css.scss的靜態頁面文件夾中工作。這裏是我的代碼：響應式背景圖像 - 引導jumbotron與Ruby on Rails

home.html.erb：

<div class="jumbotron debug"> 
<div class="container"> 
</div> 
</div>

static_pages.css.scss：

.jumbotron { 
    background: url(http://www.wolmer.lt/wp-content/uploads/2013/12/tree-of-light-daughter.jpg) no-repeat center center; 
    background-size: 100% 100%; 
    -moz-background-size: 100% 100%; 
    -webkit-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
}

現在background-size: 100% 100%;應該是最初縮放圖像以100％的線身高和100％的寬度，如果我沒有記錯。我仍然沒有這樣的運氣。我甚至試圖將html和body標記設置爲height: 100%，並且什麼也沒做。也許我錯過了一些東西。任何幫助將不勝感激。

我試過的一件事是修復..但不一定是解決方案。我已將background-size設置爲cover並給出了我的圖像一個高度。這可以工作，但因爲高度沒有響應，所以它失敗了。總而言之，主要問題是我無法將jumbotron類的高度設置爲100％。設置html, body { height: 100%; }似乎也沒有幫助。

來源

2016-04-14 Nappstir

你檢查什麼'body'和'html'元素的高度是？有時它們的高度爲'0'，嘗試在你的css中添加'html，body {height：100％}'。 – user3413723

發生這種情況是因爲容器本身是空的。很高興提供背景圖片來填充空間，但這種情況下的空間是空的。

因此，要解決它，請確保頁面高度始終是瀏覽器的高度。

# css style 
html,body { height: 100%; } 

.jumbotron { 
    background: url(http://www.wolmer.lt/wp-content/uploads/2013/12/tree-of-light-daughter.jpg) no-repeat center center; 
    background-size: 100% 100%; 
    height: 100%; 
    -moz-background-size: 100% 100%; 
    -webkit-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
}

來源

2016-04-14 23:18:37 trh

好吧，我是能夠真正找出爲什麼設置jumbotron高度爲100％沒有工作，爲什麼設置html, body { height: 100%; }不工作。問題在於html和body不是100％，所以當我將jumbotron類設置爲100％高度時，它只會填充html/body所在的100％。當將html/body設置爲100％高度時，它會將高度增加到窗口大小，但jumbotron類將保持在96px的正常高度（這是因爲jumbotron div內部的container div。因此，當我設置jumbotron類的100％和HTML /體，它的工作高度。

可能會或可能沒有意義，但是這是解決我的問題。謝謝你的那些誰反正幫助。

來源

2016-04-15 02:56:58 Nappstir

響應式背景圖像 - 引導jumbotron與Ruby on Rails

回答

相關問題