主要问题是图像之间不需要的空间。如何使用HTML / CSS将图像作为马赛克对齐？
HTML：
<div id="pictures1" class="_pictures1 grid">
<div class="_pictures1-01"><div style="width:125px;height: 188px; background: red;"><img src="" width="125" height="188" alt="" /></div></div>
<div class="_pictures1-02"><div style="width:192px;height: 288px;background: green;"><img src="" width="192" height="288" alt="" /></div></div>
... SO ON ...
</div>
CSS：
._pictures1 {
width: 935px; height: 490px;
margin: -26px 0 0 59px;
float: left;
top: 20%; left: 20%;
position: absolute;
border: 1px gray solid;
}
._pictures1 div {position: absolute;}
._pictures1-01 {top: 0px; left: 35px;}
._pictures1-02 {top: 200px; left: 0px;}
/* ... SO ON ... */
解决方法
>图像都具有相同的宽高比：3/2
>图像不应被裁剪
>图像之间没有空格
>制作马赛克的图像
您可以有数千种可能性来显示您的图像。我将做一个简单的布局，应该告诉你建立自己的方式。
这是您可以实现的FANCY FIDDLE，这里是什么样子：
第一步：思考，计算，再思考
首先：简单来说，您的图像可以有3种尺寸(我将图像尺寸改为1像素，使计算更容易)：
> big：328 * 492px
>中，1/2大：164 * 246px
>小，1/4大：82 * 123px
第二：由于您的图像都是肖像，容器与大图像的高度相同，因此您必须使用可宽3宽的492px高度列：
> big：328px宽，可以显示所有尺寸的图像
> medium：328/2 = 164px宽，可显示中小图像
> small：327/4 = 82px宽，它们只能显示小图像
第三：多少列和什么图像大小？这取决于您，您必须根据容器的总宽度和要显示的图像数量进行选择。
但是在你的小提琴中，容器(._pictures1)的宽度为935px，这是不可能实现的。
935/82 = 11.4024...
最接近你的是82 * 12 = 984px宽容器。
您将不得不更改容器的宽度，或者更改图像和列的大小以适应初始宽度。
或者(扰流器)你可以使用百分比，这可以是一个替代特殊的，如果你需要你的布局是响应，但这可以变得复杂，我正在努力使事情简单。
因为我确信你很好奇，想查看一下，这里是一个示例布局
下一步：设计布局
使用笔，Photoshop或任何其他适合您的工具，如果您真的很好，甚至可以使用您的大脑来表示所需的布局。
我设计了你可以看到的形象，在答案的bigininng。
正如我之前所说，有很多布局的可能性(这些列中的列数和图像的大小)，所以例如我选择了2个大列1个中等和2个小列
328*2+164+82*2 = 984px ( = width of container so it can fit!)
最后一步：开始编码！
你可以看到结果
这个布局基于floats，所以我们需要定义宽度，容器高度，列，图像，所以它们都可以很好地相互贴合(因为我们已经考虑过这个计算和设计，很容易)。
CSS：
#wrap {
width:984px;
height:492px;
}
.big_col,.medium_col,.small_col{
height:492px;
float:left;
}
img {
display:block;
margin:0;
padding:0;
border:none;
float:left;
}
.big_col {
width:328px;
}
.medium_col{
width:164px;
}
.small_col{
width:82px;
}
.big_img img {
width:328px;
height:493px
}
.medium_img img {
width:164px;
height:246px;
}
.small_img img {
width:82px;
height:123px;
}
然后HTML标记：
<div id="wrap">
<div class="big_col">
<div class="small_img">
<img src="http://www.lorempixum.com/327/491/abstract" alt="" />
<img src="http://www.lorempixum.com/g/327/491" alt="" />
<img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
<img src="http://www.lorempixum.com/327/491/nature" alt="" />
</div>
<div class="medium_img">
<img src="http://www.lorempixum.com/g/327/491/business" alt="" />
<img src="http://www.lorempixum.com/327/491/people" alt="" />
</div>
<div class="small_img">
<img src="http://www.lorempixum.com/g/327/491/food" alt="" />
<img src="http://www.lorempixum.com/327/491" alt="" />
<img src="http://www.lorempixum.com/327/491/cats" alt="" />
<img src="http://www.lorempixum.com/327/491/people" alt="" />
</div>
</div>
<div class="big_col">
<img src="http://www.lorempixum.com/327/491/nature" alt="" />
</div>
<div class="small_col small_img">
<img src="http://www.lorempixum.com/g/327/491/transport" alt="" />
<img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
<img src="http://www.lorempixum.com/327/491/nature" alt="" />
<img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
</div>
<div class="medium_col medium_img">
<img src="http://www.lorempixum.com/327/491/nightlife" alt="" />
<img src="http://www.lorempixum.com/g/327/491/transport" alt="" />
</div>
<div class="small_col small_img">
<img src="http://www.lorempixum.com/327/491/fashion" alt="" />
<img src="http://www.lorempixum.com/327/491/nature" alt="" />
<img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
<img src="http://www.lorempixum.com/327/491" alt="" />
</div>
</div>
