CSS：如何使背景圖像顯示一個div內沒有設置固定的高度

我已經做了如下佈局：CSS：如何使背景圖像顯示一個div內沒有設置固定的高度

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標籤嗎？

那裏的高度是由圖像大小本身決定的。

來源

2017-04-02 michael.zech

你可以使用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>

來源

2017-04-02 07:36:04 aje

目前，您.header沒有任何內容，因而其高度實際上是0像素....

要改變這種狀況，你可以把內容插入到你的.header，如：文字，圖片...或通過css，靜態（以px）或動態（通過'％'或'vh'...）給它的高度

來源

2017-04-02 07:32:01

您可以使用一個透明的圖片象下面這樣：

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>。

來源

2017-04-02 07:46:11 ata

CSS：如何使背景圖像顯示一個div內沒有設置固定的高度

回答

相關問題