與響應背景圖像奮鬥

我已經閱讀了很多關於響應CSS背景圖像的文章，但我無法讓我的工作。與響應背景圖像奮鬥

我的網站是http://www.conn3cted.uk.tn/intManagement.html，我正在嘗試將圖片用作「橫幅」，因此不能將高度設置得太大。

我似乎可以在桌面或移動設備上解決問題，但他們不想一起工作。我已經使用了建議的解決方案（下面），但是我沒有把整個圖片放大/縮小，它只顯示了一部分或大量的空白區域。我究竟做錯了什麼！？

.whatWeDo { 
    padding-top: 100px; 
    background-image: url("/images/intManagement/homePage/whatwedo.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    height: 120px; 
}

來源

2016-04-29 OmisNomis

嘗試使用'margin-top'而不是'padding-top' –

查看此li nk for responsive圖片https://responsivedesign.is/resources/images/picture-fill –

試試這個CSS和使用媒體查詢更改與容限頂部移動設備：

.whatWeDo { 
    background-image: url("/images/intManagement/homePage/whatwedo.jpg"); 
    background-repeat: no-repeat; 
    background-size: 100% auto; 
    height: 100vh; 
    margin-top: 80px; 
} 

@media screen and (max-width: 878px) { 
    .whatWeDo { 
     margin-top: 170px; 
    } 
}

來源

2016-04-29 13:46:53 Sylvain

啊，那更好！因爲我可以使它與iPad一起工作！你能向我解釋什麼是'100vh'嗎？在處理「高度」時，我只使用過'px'或'％'等 – OmisNomis

vh是一個視口單元，視口是瀏覽器呈現網站的區域。 VW：1 /第100次的視口寬度 VH：1 /第100次視口高度 VMIN：1 /第100次的最小側的 VMAX：1 /第100次最大側注：IE9使用代替VMIN VM。它不支持vmax。 – Sylvain

我想我需要做一些閱讀 - 仍然困惑它是什麼:) – OmisNomis

試試這個CSS替換爲你的CSS：

這也只響應機頂盒按您需要：

.whatWeDo { 
    background-image: url("/images/intManagement/homePage/whatwedo.jpg"); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    float: left; 
    height: 100%; 
    padding-top: 100px; 
    position: relative; 
    top: 80px; 
    width: 100%; 
}

來源

2016-04-29 13:20:44 Jainam

我稍微修改了一下（我刪除了'padding-top'，因爲它似乎並不需要，修改'height：'爲' 30％「，因爲它太大了。但是，感謝你，這是完美的！請你給我一個簡單的解釋，說明這是什麼做的好嗎？ – OmisNomis

因爲你的「.navbar」類給位置：固定，那麼我給這個位置：在這個類中的相對「.whatWeDo」 – Jainam

與響應背景圖像奮鬥

回答

相關問題