为什么图片和下面的div之间有空格？答案

【问题标题】：Why is there a space between the image and the div below?为什么图片和下面的div之间有空格？
【发布时间】：2014-03-25 15:37:50
【问题描述】：

我已设置将图像缩放到全宽，但是当它变高时将其底部剪掉。设置是这样的：

div, img, body {
    margin: 0;
    padding: 0;
}
#image {
    width: 100%;
    height: auto;
}
#top {
    max-height: 100px;
    width: 100%;
}
#bottom {
    height: 200px;
    width: 100%;
    background: green;
}
body { background: yellow; }

当图像高度超过 100 像素时，这看起来符合预期。但是，当图像高度小于容器最大高度（即 100 像素）时，图像和下面的 div 之间会存在间隙。图像容器 div 的高度（“top”）大于显示图像的高度。我不明白为什么。

在这里测试：http://jsfiddle.net/lborgman/5mBPv/7/

我在 Windows 上的最新 Chrome（版本 33.0.1750.154 m）中执行此操作。更新：刚刚测试了我的 Firefox。我在那里看到同样的事情。在 IE 11 中。

更新 2：看起来#image 和 #bottom 之间的差距始终是 4px。这看起来很有趣。

【问题讨论】：

移除 #top { 到最大高度：100px;

标签： html css image

【解决方案1】：

图片容器div的高度（“top”）大于显示图片的高度。

问题在于，上述情况不一定正确。当您设置宽度时，浏览器会放大或缩小图像以保持比例，在本例中为width:100%。例如，如果您的图片是 100x100，但它所在的框是 300px 宽，则图片将被放大到 300x300，因此高于容器。

【讨论】：

谢谢@kba，但我不明白你的意思。当然，包含框是问题所在。它比预期的要高一点，但只是一点点。一些像素。它遵循图像高度，但由于某种原因它增加了一些额外的高度。
@Leo 什么盒子？ <div id="top"> 正如您的 CSS 所说，最大为 100px。正如您的 CSS 所说，<div id="bottom"> 又是 200 像素。你觉得哪个 div 比它应该的大？ <div id="outer"> 没有定义高度，所以我不认为是那个高度？
我明白了。将小提琴视口调整为小尺寸，您将看到：图像 -> 黄色 -> 绿色 -> 黄色，无论视口大小如何。他希望它是：图像 -> 绿色 -> 黄色。 #top 无论如何都必须达到 100px 的高度？
感谢@hungerstar，我更正了小提琴中提到的图像。不过不影响结果。当图像高度小于包含 div 的最大高度时，图像和#bottom 之间存在间隙。
@Leo 啊，我现在明白了。是的，div 定义了一个隐藏的最小高度，因为它给了你足够的空间来写。添加font-size: 0; 或line-height: 0 将解决此问题。

【解决方案2】：

试试这个....

img {
   margin: 0;
   padding: 0;
   display:block; 
}

将 img 设置为 display:block 即可解决问题

【讨论】：

删除 #top{max-height:100px} 无论如何都无济于事，因为这意味着您可以将该 div 拉伸到 100px，但如果高度小于 100px，请不要定义它的高度。所以在 100px 高度下，它将根据 Div 的内容...谢谢

【解决方案3】：

这可能是因为图像无法自动适应容器的大小。它会溢出盒子。最简单的解决方法是：

#img{
    width:100%;
    height:heightofcontainer;
}

您的另一个选项是在#top 上放置overflow:hiddin;，但这会切断图像。

另外，这可能会有所帮助：How do I auto-resize an image to fit a div container

【讨论】：

谢谢。我当然可以用 javascript 做到这一点，是的，但我想避免这种情况。（而且它“下溢”... ;-)）
@Leo 你想用你的代码完成什么？我不确定我是否理解您的想法。
请看小提琴，@kba。我希望#bottom div 始终与图像保持连接。现在，当图像高度小于其包含的 div 的最大高度之间存在空间。