Question

我已经设置将图像缩放到全宽，但是当它变高时切割底部。设置如下：

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; }

当图像高度超过100px时，这看起来像预期的那样。但是，当图像高度小于容器max-height（100px）时，图像与下面的div之间存在间隙。图像容器div（“top”）的高度大于显示图像的高度。我不明白为什么。

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

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

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

Answer 1

图像的容器div（＆＃34; top＆＃34;）的高度大于显示图像的高度。

问题在于上述情况并非如此。当您设置宽度时，浏览器向上或向下缩放图像以保持比例，在本例中为width:100%。例如，如果您的图片是100x100，但它所在的盒子是300px宽，则图片将被放大为300x300，因此高于容器。

Answer 2

尝试这个......

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

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

Answer 3

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

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

您的其他选项位于#top上overflow:hiddin;，但这会切断图片。

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

为什么图像和下面的div之间有空格？

3 个答案: