html - 图片不占 div 高度的 100%

Question

我正在一个布局相当简单的测试站点上工作。它被分成具有交替宽度的两列的行。我的问题是，无论出于何种原因，插入其中一个列 div 的图像没有占据 div 的 100% 高度。它短了几个像素。这是一个问题，因为同一行中的两列需要看起来“等高”。

我在其中一个有图像问题的 div 上放置了一个红色背景，这样您就可以轻松地看到我在说什么。我确信它相当简单，我只是忽略了一些东西，但是在这个星期一早上我似乎找不到它。任何帮助将非常感激。谢谢！

score 11 · Accepted Answer

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

将带有图像的 div 设置为

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

编辑：

或者，将设置<img />为display:block;以便不应用内联填充

score 3 · Accepted Answer

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

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

score 0 · Accepted Answer

如果我正确理解您要完成的工作，您可以在<div class="product clearfix color-box">元素上设置一个高度值，200px例如，然后将.vendorand.vendor-images以及其中img包含的内容设置为height: 100%

score 0 · Accepted Answer

您的图像纵横比错误。它太长了。

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

您还可以将左侧的小图像设置为 float:left 值和右侧的 float:right，并在左侧使用 30% 的宽度，在右侧使用 65% 的宽度。不设置填充，剩余的 5% 将为您提供填充。

或者您可以简单地更改图像的纵横比。

score 0 · Accepted Answer

删除类 .box-expand、.color-box-expand 边距和填充。然后设置每个 div 的高度。然后它将正常工作。

score 0 · Accepted Answer

这段代码对我来说 100% 有效。

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

把它放在 img 标签的父级上。

6 回答 6