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

时间:2014-07-15 09:42:20

标签: html css responsive-design

当你有

的图像时
width: 100%;
height: auto;

包含在一个方框中,取决于图像的宽高比(我认为)和盒子的尺寸,它不会总是填充盒子的整个高度。

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

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

如果可能的话,我想在没有Javascript的情况下获得解决方案,但如果这是我将采取的唯一解决方案。

的jsfiddle

http://jsfiddle.net/BeYqu/

1 个答案:

答案 0 :(得分:3)

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

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

希望你需要这个。

Demo