強制div具有背景圖像的大小

在Div上使用背景圖像時，我無法顯示圖像的全部高度，既不使用height:auto;或使用height: 100%。爲什麼這樣？我該如何解決這個問題？強制div具有背景圖像的大小

我創建了一個JS小提琴這裏：https://jsfiddle.net/2d0npz2v/5/

body, html { 
 
    height: 100%; 
 
    margin: 0px; 
 
} 
 
.imageContainer2 { 
 
    background-image: url("http://i.imgur.com/AWi7r5m.jpg"); 
 
    background-position: center top; 
 
    background-size: 100% auto; 
 
    height: 100%; 
 
}

<div class="imageContainer2"></div>

UPDATE 只是爲了清晰，圖像需要100％的寬度，和經銷商的高度（不在底部切）。這個例子可以工作，但它使用「content」屬性而不是「background-image」：https://jsfiddle.net/j47a6x7s/。我正在尋找相同的行爲，但沒有使用內容。

來源

2015-12-11 MeV

您必須指定div的高度和寬度。 –

適合我，你只是忘了把ehight酒店設置成你的小提琴。 – AlexG

@亞歷克斯，不，圖像沒有完全顯示，圖像的某些部分被切割在底部。 – MeV

那麼，這是爲什麼？

在您的工作示例中使用內容。內容擁有自己的高度並佔用空間，頁面上的其他元素必須遵守。

隨着background-image解決方案，您使用的背景，它不使用空間。 .imageContainer2元素無法知道背景圖像的高度並適應它。

這很問題在這裏解決：How to get div height to auto-adjust to background size?
只是檢查，如果你

來源

2015-12-14 10:27:18 HerrSerker

非常感謝@HerrSerker，你是對的，問題實際上是解釋同樣的問題。 – MeV

如果您負責HTML代碼，您可以將例如'background-image'，'padding-bottom'這樣的必要CSS設置爲內聯'

強制div具有背景圖像的大小

回答