基於內部圖像的容器高度不正確

Question

正如你可以在附圖中看到的，.grid-item div沒有它的內容的確切高度（在我的例子中爲<img>），但它似乎添加了一個底部有幾個像素。

我怎麼能告訴.grid-item股利用其中的圖像的確切高度？

理想情況下，如果可能的話，我想保留absolute和relative定位divs，就像下面的例子。

HTML結構：

<section> 

    <div class="grid-item"> 
    <div class="item-content"> 
     <div class="caption"> 
     <!-- .... --> 
     </div> 
     <img src="http://placehold.it/700x400/" alt="" /> 
    </div> 
    </div> 

</section> 

CSS：

*{ 
    box-sizing:border-box; 
    margin:0; 
} 

body{ 
    font: 16px/1.5em sans-serif; 
} 

img{ 
    width:100%; 
    height:auto; 
    position:relative; 
} 

section{ 
    max-width:960px; 
    margin:0 auto; 
} 

section .grid-item{ 
    width:50%; 
    float:left; 
    padding:20px; 
} 

section .grid-item .item-content{ 
    position:relative; 
    width:100%; 
    overflow:hidden; 
} 

section .grid-item .item-content .caption{ 
    position:absolute; 
    width:100%; 
    height:100%; 
    background:#333; 
    transform:translateX(-50%); 
    z-index:2; 
} 

-

FULL CODE： http://codepen.io/anon/pen/zrydZX?editors=1100

Answer 1

添加display:block您img規則：http://codepen.io/anon/pen/qbLXxd?editors=1100

圖像默認直列讓您垂直對齊他們的文本塊。關鍵的缺點是，這導致它們也受到線高度，字體大小，字距調整等的影響。