图像不占据div高度的100％

我正在测试网站上进行相当简单的布局。它被分成两列交替宽度的行。我的问题是，无论出于什么原因，我插入到其中一个列div的图像不占用div的100％高度。它短了几个像素。这是一个问题，因为同一行中的两列需要显示为“等高”。图像不占据div高度的100％

我把红色的背景放在一个带有图像问题的div上，所以你可以很容易地看到我在说什么。我相信这很简单，我只是忽略了一些东西，但在这个星期一的早上，我似乎无法找到它。任何帮助将非常感激。谢谢！

2012-09-10 joshmath

它可能是一个填充问题？ –

当我把它放在萤火虫，布局没有显示任何填充img或div – joshmath

告诉我们在jsfiddle.net演示 –

有时由于内嵌文本大小/行高，内嵌图像在底部会有额外的填充。

设置与图像的div来

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

编辑：

或者，通过设置<img />到display:block;所以不应用内嵌填充

2012-09-10 17:24:20 MikeM

这正是我需要的。谢啦。不知道我会想到img上的'display：block'。 – joshmath

如果我理解正确的话，你要完成，你可以设置在<div class="product clearfix color-box">元素的高度值的，说200px例如，然后让.vendor和.vendor-images，以及其中包含的img，设置为height: 100%

2012-09-10 17:21:13 kz3

谢谢凯尔。这个解决方案肯定会起作用，但我希望能够提出一个答案，不会强制每一行的高度，因为它们都是不同的。应该在开始时说明。 – joshmath

尝试添加vertical-align:top到您的图像规则：

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

2012-09-10 17:27:47 j08691

非常感谢！这让我想起这实际上有效，但它确实很完美。为什么这会解决问题？ – joshmath

它的工作原理是因为图像是内嵌元素，所以它们像文本一样垂直坐下，其中包含下行空间的额外空间（例如'j'，'y'，'g'等等）。指定垂直对齐顶部可以去除该空间。 – j08691

明白了。现在它是完全意义上的。谢谢澄清！ – joshmath

你有你的图像的长宽比错误。它太长了。

你可以做的更简单的事情是将.vendor-images图像作为背景，而不是使用img标签。然后你可以伸展它，所以它不会给你那个错误。

您也可以将左边的小图像设置为float：left值，右边的float：right，左边的宽度为30％，右边的宽度为65％。设置没有填充和剩余5％会给你填充。

或者您可以只是简单地改变图像的宽高比。

2012-09-10 17:27:56

即使我的图片原本太长，不应该div缩小到它的高度，因为它是div中的唯一元素，img设置为'max-width =“100％”'？另外，你可以给一个div背景img没有设置明确的高度？ – joshmath

删除class .box-expand，.color-box-expand margin和padding。然后在每个div上设置高度。然后它会正常工作。

2012-09-10 17:28:25 ram

是的，这是完全有效的，但我试图完成这个，而不必设置一个高度。应该说明。 – joshmath

回答