CSS Parent Div未調整爲響應圖像大小

Question

我有一個父級div，因此未將響應圖像的寬度設置爲100％。父div的高度設置爲300px，但當圖像調整大小時，div保持在300px，並在圖像和容器內容之間留下很大的空間。我曾嘗試過：

.bannercon { 
    /*height: 300px;*/ 
    padding: 1em 0; 
    overflow: hidden; 
} 

我創建了一個小提琴來展示問題。

https://jsfiddle.net/volterony/hhyswzw3/

的問題是我怎麼能獲得圖像的容器div來也相應調整，會出現圖像和文本之間沒有間隙？

乾杯

Answer 1

只需卸下固定高度。無論如何，它將與圖像有關。

比你必須使圖像之間的div和".bannercon" div位置相對，因此它也具有圖像的高度。

所以刪除

#header-fade-0 { 
    position: absolute; 
} 

，並改變這樣

.bannercon { 
    padding:1em 0; 
    overflow: hidden; 
} 

.bannercon CSS規則下面是一個更新的小提琴： https://jsfiddle.net/hhyswzw3/8/

Answer 2

你的DIV大小無法自動調整，如果你定義高度300px，試圖改變div´s CSS來

div { 
    min-height: 300px; 
}