html - 流体图像在新行上创建不需要的空间。图片高度不占用容器高度

<分区>

当你有图片时

width: 100%;
height: auto;

包含在一个盒子中，根据图像的纵横比(我认为)和盒子的尺寸，它不会总是填充盒子的整个高度。

当这些图像只有一行并排时，您不会真正注意到这一点，但如果它们进入新的一行，您可以看到顶行和底行之间有几个像素的空间。盒子相互接触，但盒子中的图像没有占据盒子的所有高度。

我无法在这些框/图像上设置固定的高度和宽度，因为它们应该是流动的。

如果可能的话，我想在没有 Javascript 的情况下获得解决方案，但如果这是唯一的解决方案，我会接受它。

JSFIDDLE

http://jsfiddle.net/BeYqu/

最佳答案

您可以将display:block设置为图片

img {
    width: 100%;
    height: auto;
    display:block; /* add this */
}

希望你需要这个。

Demo

关于html - 流体图像在新行上创建不需要的空间。图片高度不占用容器高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24754837/

相关文章：

css - 如何实现手机分屏，但宽度是屏幕尺寸的两倍？