CSS - 圖像容器div與圖像大小不一樣

Question

我在下面的容器div中有一個圖像，它是一個包含可滾動文本的div。圖像的大小可能會有所不同，因此圖像的高度將根據所顯示的圖像而有所不同，即，在我的示例中，它並不總是400 x 200。

我的問題是，當文字滾動時，圖像和文字應在圖像後面滾動的點之間有一個空格。這似乎是因爲圖像容器div與圖像大小不一樣。

此的jsfiddle顯示問題https://jsfiddle.net/t0ag2z5k/50/

誰能告訴我這兩個爲什麼發生這種情況，以及如何解決它嗎？

CSS代碼如下...

#plotdetails { 
    display: flex; 
    flex-direction: column; 
    float: left; 
    width: 400px; 
    z-index: 5; 
    position: fixed; 
    height: 100%; 
} 

#plotdetails #plot-img-container { 
    display: inline-block; 
} 

#plotdetails #plot-img-container img{ 
    width: 400px; 
    display: inline-block; 
} 

#details-text { 
    padding: 0 20px 0 20px; 
    overflow-y: scroll; 
    flex: 1; 
} 

HTML這裏

<div id="plotdetails"> 
<div id="plot-img-container"> 
    <img src="http://placehold.it/400x200"> 
</div> 
<div id="details-text"> 
    <h1>Lot's of words here....</h1> 
</div> 
</div> 

Answer 1

你爲什麼想你的形象將顯示爲inline-block的時候它沒有利用這樣？嘗試（https://jsfiddle.net/t0ag2z5k/52/）：

#plotdetails #plot-img-container img{ 
    width: 400px; 
    display: block; 
}