图像不占据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

尝试将vertical-align:top添加到图片规则中：

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

<强> jsFiddle example

Answer 3

如果我正确理解您要完成的操作，可以在<div class="product clearfix color-box">元素上设置高度值，例如200px，然后设置.vendor和{{ 1}}以及其中包含的.vendor-images设置为img

Answer 4

您的图像宽高比错误。太长了。

您可以做的更容易的事情是将.vendor-images图像作为背景而不是使用img标记。然后你可以伸展它，这样就不会给你错误。

您还可以将左侧小图像设为浮点数：左侧值和右侧浮点数：右侧，左侧使用30％宽度，右侧使用65％宽度。设置无填充，剩余的5％将为您提供填充。

或者您只需更改图片的宽高比即可。

Answer 5

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

Answer 6

此代码对我有100％的作用。

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

将其放在img标签的父项上。