CSS：造成这种差距的原因是什么？

Question

在this page处，在视口宽度870px左右，每个.program-image img下方都会出现一个间隙：

如何确保每个.program-image img的高度为每个.program，或每个.program是每个.program-image img的高度？

帮助表示赞赏。

Answer 1

<img>标记为inline-block元素，因此您始终需要为其定义vertical-align。否则让它阻止。

img {
  vertical-align: top;
}

或使用此

img {
  display: block;
}

Answer 2

也许试试：

height: 100%;

或

min-height: 100%;

在图像选择器上。

Answer 3

由于图像高度取决于其宽度，因此此规则会创建间隙。为了避免这种情况，我通常将图像添加为div的背景图像，将背景大小设置为覆盖（这使得图像覆盖整个div）。

首先，删除图像标记并将背景图像放在程序图像div中。

<div class="program">
   <div class="program-image" style="background-image:url('http://vmpersonal.com/wp-content/uploads/2017/02/program-pregnancy.jpg');">
        ...

然后我会继续添加以下css：

.program-image {
    height: 90px; // Or whatever height needed
    width: 45.23809523%;
    float: left;
    max-height: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

这会设置div的高度，因为它不会考虑图像的高度尺寸。

确保图像不会溢出程序元素。添加以下内容：

.program {
  overflow: hidden;
}

以下是它的外观示例（第二个程序是当前的程序，示例不包括背景位置：中心道歉）。

我希望这会有所帮助。