Мозаика изображений HTML / CSS

Я хочу сделать макет изображения спортретные изображения внутриdiv с фиксированным соотношением сторон3:2, Размер изображения327x491px.

Основная проблема - нежелательные пробелы между изображениями. Как явыровнять изображения как мозаику используя только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 ... */

jsfiddle

Ответы на вопрос(10)

Ваш ответ на вопрос