使用缩放图像2x3填充100％宽度 [英] Fill 100% width using scaling images 2x3

问题描述

我想使用缩放图片获得2 x 3张图片的网格，以填充到100％的宽度。
但是由于某种原因，图像的右边有一个12或13像素的间隙。任何人都知道如何解决这个问题？
我在这里疯了！

I'm trying to get a grid of 2 x 3 pictures to fill to 100% width using scaling images. But for some reason there's a 12 or 13 px gap to the right of the images. Anyone know how to solve this? I'm going crazy here!

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>

H>

推荐答案

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

Hashem beat me with his comment, but he's right, use

.imageContainer {
    width: 33.333%; 
}

以减少差距。

查看 演示 。

这篇关于使用缩放图像2x3填充100％宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！