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

在this page，各地视宽870px，有可能出现下面的每个.program-image img差距：CSS：造成这种差距的原因是什么？

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

帮助赞赏。

2017-03-24 Steve

请在此处添加有意义的代码和问题描述。不要只是链接到需要修复的网站 - 否则，一旦问题解决或者您链接到的网站无法访问，此问题将对未来的访问者失去任何价值。发布演示你的问题的[最小，完整和可验证示例（MCVE）]（http://stackoverflow.com/help/mcve）将有助于你获得更好的答案。有关更多信息，请参见[我网站上的某些内容不起作用。我可以只粘贴一个链接吗？]（https://meta.stackexchange.com/questions/125997/）谢谢！ –

.program-image {padding-bottom：0;} –

将一些填充放到.program-image –

由于图像高度取决于其宽度，因此该规则会产生间隙。为了避免这种情况，我通常将图像作为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; 
}

下面是它的外观的例子（第二方案是它目前是如何，例如不包括背景位置：中心道歉）。

我希望这会有所帮助。

来源

2017-03-24 09:31:58 thisiskelvin

感谢您的帮助Kelvin – Steve

<img>标签是inline-block元素，所以你总是需要为它定义vertical-align。否则使其阻塞。

img { 
    vertical-align: top; 
}

或使用该

img { 
    display: block; 
}

来源

2017-03-24 07:20:40 Lucian

也许尝试：

height: 100%;

或

min-height: 100%;

上的图像选择

。

来源

2017-03-24 09:05:12 Sean

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

回答

相关问题