圖像不佔據div高度的100％

Question

我正在測試網站上進行相當簡單的佈局。它被分成兩列交替寬度的行。我的問題是，無論出於什麼原因，我插入到其中一個列div的圖像不佔用div的100％高度。它短了幾個像素。這是一個問題，因爲同一行中的兩列需要顯示爲「等高」。

我把紅色的背景放在一個帶有圖像問題的div上，所以你可以很容易地看到我在說什麼。我相信這很簡單，我只是忽略了一些東西，但在這個星期一的早上，我似乎無法找到它。任何幫助將非常感激。謝謝！

這裏是我的測試網站：http://hartsfielddesign.com/test2/test.html

Answer 1

有時由於內嵌文本大小/行高，內嵌圖像在底部會有額外的填充。

設置與圖像的div來

font-size:0; 
line-height:0; 

http://jsfiddle.net/pxfunc/ZC7Xa/1/

編輯：

或者，通過設置<img />到display:block;所以不應用內嵌填充

http://jsfiddle.net/pxfunc/ZC7Xa/3/

Answer 2

如果我理解正確的話，你要完成，你可以設置在<div class="product clearfix color-box">元素的高度值的，說200px例如，然後讓.vendor和.vendor-images，以及其中包含的img，設置爲height: 100%

Answer 3

嘗試添加vertical-align:top到您的圖像規則：

img{ 
    max-width: 100%; 
    width: 100%; 
    vertical-align:top; 
} 

jsFiddle example

Answer 4

你有你的圖像的長寬比錯誤。它太長了。

你可以做的更簡單的事情是將.vendor-images圖像作爲背景，而不是使用img標籤。然後你可以伸展它，所以它不會給你那個錯誤。

您也可以將左邊的小圖像設置爲float：left值，右邊的float：right，左邊的寬度爲30％，右邊的寬度爲65％。設置沒有填充和剩餘5％會給你填充。

或者您可以只是簡單地改變圖像的寬高比。

Answer 5

刪除class .box-expand，.color-box-expand margin和padding。然後在每個div上設置高度。然後它會正常工作。