使用缩放图像2x3填充100％宽度

Question

我尝试使用缩放图像获取2 x 3图片的网格以填充到100％宽度。 但出于某种原因，图像右侧有12或13像素的间隙。有谁知道如何解决这个问题？ 我在这里疯了！

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

哈希姆用他的评论打败了我，但他没错，用

.imageContainer {
    width: 33.333%; 
}

缩小差距。

请参阅 demo 。

Answer 2

您的.imageContainer元素的宽度设置为33%。 3套33％使99％，意味着你的宽度的1％不占。您可以通过将宽度设置为33.33%来解决此问题：

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

---

body {
  margin:0;
  padding:0;
}	

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

.imageContainer {
  position: relative;
  width: 33.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>