css - 使用缩放图像 2x3 填充 100% 宽度

Question

我正在尝试使用缩放图像将 2 x 3 图片填充到 100% 宽度的网格。但由于某种原因，图像右侧有 12 或 13 像素的间隙。任何人都知道如何解决这个问题？我要疯了!

body {
  margin:0;
  padding:0;
}	

.header { 
  height:200px;
  width:auto;
  background:#22FF00;
}

.imageContainer {
  position: relative;
  width: 33%;
  padding-bottom: 26%;
  float: left;
  height: 0;
}

img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
}

.clearfloats {
  clear:both;
}

<div class="header">asd</div>

<div class="imageContainer">
  <img src="http://placekitten.com/600/449" />
</div>

<div class="imageContainer">
  <img src="http://placekitten.com/600/449" />
</div>

<div class="imageContainer">
  <img src="http://placekitten.com/600/449" />
</div>

<div class="clearfloats"></div>


<div class="imageContainer">
  <img src="http://placekitten.com/600/449" />
</div>

<div class="imageContainer">
  <img src="http://placekitten.com/600/449" />
</div>

<div class="imageContainer">
  <img src="http://placekitten.com/600/449" />
</div>

Answer 1

Hashem 用他的评论打败了我，但他是对的，使用

.imageContainer {
    width: 33.333%; 
}

失去差距。

参见 demo 。