CSS響應標題圖片

我一直對我是否正確地做這件事感到好奇，現在我想解決這個問題。CSS響應標題圖片

通常在前端開發中，登錄頁面（通常是其他）需要某種形式的響應頭文件圖像，其中包含文本，可能是一個按鈕或兩個，無論如何。問題是，標題成爲一個帶有背景圖像的容器。夠簡單。

但是，當開發人員做出反應時，您需要對此背景圖像進行縮放，因此您根據自己的需要將background-size設置爲100%,cover等。（讓我們忽略對IE8的支持不足Bootstrap announced dropping support for IE8 in the upcoming version 4，這也是我最終推進的提示）。現在我們有一個很好的響應式背景圖片，可以在保持高寬比的同時擴展到頁面的大小。

這一切都很好，但我們的標題的高度取決於背景圖像的高度，這取決於標題的寬度。我們可以使用vw單位，因爲頭部的高度取決於它的寬度，或者更具體地說，在任何給定時間背景圖像的寬度（假設標題的寬度是窗口的100％）。假設我們的背景圖像是1080x720，它變成了一個簡單的公式：height-percent = 720/1080*100。標題的高度現在將在任何給定時間完全是背景圖像的高度。到這裏的步驟看似複雜，但在現實中，我們有一個非常簡單的完全響應頭：

header { 
    width: 100%; 
    height: 66vw; 
    background: url('bg.jpg') no-repeat; 
    background-size: 100%; 
}

它完美的作品在理論上，但也有a few known issues with viewport units，更何況缺乏對IE8的支持完全是我在這一點上可以不太在意。但爲了爭論，讓我們把這個問題作爲解決高度問題的方法來解決。我們想要一個解決方案，不會讓我們在晚上，所以我們繼續解決方案＃2：

在標頭容器內創建一個絕對定位的圖像，使圖像響應width: 100%; height: auto，我們又回到了哪裏我們開始了。響應標題圖像，但我們無法將標題容器設置爲height: auto，因爲圖像具有絕對定位，並且我們的高度仍依賴於圖像。更何況，圖像具有絕對定位，所以一旦視口變得比圖像大，它不會擴大任何規模，因爲它的屬性適用於自身（我認爲？）。所以絕對位置方法存在兩個問題，這使得它幾乎不可用。

最後，我們可以打破網頁設計的10條誡命，並使用JavaScript動態設置寬度和高度。不理想，不漂亮，但它可以工作，並將在所有瀏覽器中兼容，至少我們仍在爲之開發。

但是我們真的需要JavaScript爲此？第一種使用vw單位的方法是否足夠？這就是我被困住的地方。

所以要包裝起來，我想知道哪種解決方案是最合適的。請注意：我不是在徵求你的意見，而是我正在尋找「什麼是這樣做的正確方法。期」。這其中有對我來說是挑戰，我真的可以使用一些答案:)

來源

2015-08-30 samrap

如果你想支持古老的瀏覽器，然後JS是正確的（也是唯一）的方式來實現這一目標。

我個人喜歡使用jQuery。你可以像這樣將像素轉換爲vh/vw：

$(window).height() * 0.98 // is equiv to 98vh 
$(window).width() * 0.98 // is equiv to 98vw

來源

2015-09-04 19:26:03

是的，JavaScript是我認爲是最好的解決方案，它只是讓很多人快速形成對你的暴徒。這是非常輕量級的，謝謝回答 – samrap

我喜歡這個解決方案。我只是想包括，沒有什麼使用JQuery實際上是「輕量級」，因爲你有包括整個JQuery頭，這是很多。我沒有看到它的問題，只是想提及它。 – JHolub

CSS響應標題圖片

回答

相關問題