CSS：如何在不設置固定高度的情況下使背景圖像出現在div中

Question

我做了以下布局：

 html, body { height: 100%; } .header { height: 120px; width: 100%; background-image: url(http://lorempixel.com/500/120/); background-repeat: no-repeat; background-position: center; background-size: contain; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" /> <div class="row"> <div class="columns small-12 header"></div> </div> 

之所以有效，是因為我使用了具有固定像素值的高度屬性。

如果將其刪除，則圖像消失：

 html, body { height: 100%; } .header { width: 100%; background-image: url(http://lorempixel.com/500/120/); background-repeat: no-repeat; background-position: center; background-size: contain; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" /> <div class="row"> <div class="columns small-12 header"></div> </div> 

使用固定高度的問題之一是無法實現響應能力。

如何在不使用固定高度的情況下顯示背景？ 還是應該改用img-tag？

那里的高度由圖像尺寸本身決定。

Answer 1

目前，您的.header沒有任何內容，因此其高度實際上是0px ....

要更改此設置，您可以將內容放入.header例如：text，images ...或通過css設置其高度，可以是靜態（以px為單位）或動態（通過'％'或'vh'）... ）

Answer 2

您可以使用viewport height來使div響應，在下面的示例中40vh是視口高度的40％。

 html, body { height: 100%; } .header { height: 40vh; width: 100%; background-image: url(http://lorempixel.com/500/120/); background-repeat: no-repeat; background-position: center; background-size: contain; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" /> <div class="row"> <div class="columns small-12 header"></div> </div> 

Answer 3

您可以使用一個透明圖像，如下所示：

 html, body { height: 100%; } .header { width: 100%; background-image: url(http://lorempixel.com/500/120/); background-repeat: no-repeat; background-position: center; background-size: contain; } .header img { width: 100%; } 

 <div class="row"> <div class="columns small-12 header"> <img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAGQBAMAAACkCxkHAAAAGFBMVEUAAAD///+TlJWcnp+Ji4yIiouVlZaSk5OelJf9AAAAAXRSTlMAQObYZgAAANVJREFUeF7tzTEVgEAMBbB/HZivDhCBBAQgBf8TLngdEgNJZw6qszMGV1YG4X6OHxYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIA3g1DZGYSVPjMG1R9lOgHLp7M9BAAAAABJRU5ErkJggg==" /> </div> </div> 

您可以在此處更改窗口大小： https ： //jsfiddle.net/gcejf26t/

如果您發現圖像顯示異常，因為它們就是那樣！ 與CSS無關（當然，透明圖像的比例可以等於您的圖像的比例）。

與我使用過的圖像相比，您可以找到較小的base64編碼圖像，並且可以根據需要找到更好的比率。

但是為什么要這樣做呢？ 我不知道！ 為簡單起見，請使用<img> 。