Scaling CSS Header

我試圖爲我的標題設置一個可縮放的背景圖片，只是基於瀏覽器窗口的寬度（現在）。現在，與我所擁有的一樣，它的寬度縮放得很好。但是標題本身並沒有改變高度，它與文本行的高度有關。如果我沒有文字，它根本不會出現。當我調整窗口的大小時，標題圖像的底部不顯示。我曾嘗試將最小高度設置爲各種不同的值，但它並沒有滿足我的需要。Scaling CSS Header

我希望它根據圖像縮放標題的高度。如果窗口很小，它會縮小到文本行的高度。如果它很大，它會比文本行縮放大。這可能嗎？我見過其他網站，它的工作很好。我已經找到說明如何做到這一點......在WordPress的某些特定主題。

HTML：

<header> 
     <p> 
      Line 1<br> 
      Line 2<br> 
      Line 3<br> 
      Line 4<br> 
      Line 5<br> 
     </p> 
</header>

CSS：

header { 
    background-image:url('./waybackIMG_1496.jpg'); 
    background-size : cover; 
    background-repeat : no-repeat; 
} 
header p { 
    line-height  : 1.2em; 
    text-align  : right; 
}

來源

2015-02-24 CarenRose

您無法將某些東西縮放到背景圖像的高度。 – 2015-02-24 17:23:54

您無法使背景圖片上的標題高度依賴於它。顯示背景的唯一部分是div所佔用的空間。 – j4k3 2015-02-24 17:27:22

我個人使用的高度：0填充底：％;爲響應高度。我認爲你所追求的是這樣的。

header { 
    background-image:url('./waybackIMG_1496.jpg'); 
    background-size : cover; 
    background-repeat : no-repeat; 
height: 0; 
padding-bottom: 40%; 
}

使用螢火蟲調整填充底部以適合圖像的高度。使用background-size: cover;當填充底部超過其自然尺寸時，圖像將開始比視口變寬。

然後使用媒體查詢設置絕對標題大小，當它達到bg圖像的寬度時。

@media (max-width: 900px) { 
header { 
padding:0; 
height: 350px; 
} 
}

來源

2015-02-24 17:25:02 Aaron

這工作！現在，有沒有辦法讓標題的高度不縮放到小於p的高度？ – CarenRose 2015-02-24 17:48:03

使用媒體查詢刪除填充並在屏幕與圖像寬度匹配時添加固定高度。 – Aaron 2015-02-24 18:56:13

我已經爲你更新了我的答案。如果這是正確的，可以點擊我答案旁邊的勾號。 – Aaron 2015-02-24 19:00:51

假設你知道背景圖像的高度：

header { 
    /* background styles */ 
    padding-bottom: 20%; 
    position: relative; 
} 

header p { 
    position: absolute; 
    width: 100%; 
}

的bottom-padding在容器上竟然會被它的寬度（並非其高度）的百分比，因此您可以使用比率力一個容器始終爲縮放圖像提供足夠的空間。

該比例可以計算爲（100 * imageHeight/imageWidth）％

來源

2015-02-24 17:26:50

Scaling CSS Header

回答

相關問題