чтобы сделать правильный ответ, я сначала собираюсь уточнить требования:

1. изображения все имеют одинаковое соотношение сторон: 3/2
2. изображения не должны быть укороченные
3. нет пространства между изображениями
4. сделать мозаику из картинки

вы можете иметь тысячи возможностей для отображения ваших изображений. Я собираюсь сделать простой макет, который должен показать вам путь, чтобы построить свой собственный.

здесь FANCY FIDDLE того, что вы можете достичь, и вот как это выглядит:

первый шаг: подумайте, вычислите и подумайте еще раз

первый : чтобы сделать его простым, скажем, ваши изображения могут иметь 3 размера (я изменил размер изображения на 1 px, чтобы упростить вычисления):

1. большой : 328*492px
2. средний, 1/2 большой:164*246px
3. небольшой, 1/4 большого : 82*123px

второй : поскольку все ваши изображения являются портретами, а ваш контейнер имеет ту же высоту, что и большое изображение, вам придется работать с столбцами 492px heigh, которые могут иметь 3 ширины:

1. большой : 328px широкий, они могут отображать все изображения размером
2. среда : 328/2 = 164px широкий, они могут отображать средние и небольшие картинки
3. маленький : 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!)

последний шаг : начать программировать!

вы можете увидеть результат в этой

скрипка

этот макет основан на терки поэтому нам нужно определить ширину, высоту контейнера, столбцы, изображения, чтобы они все могли хорошо вписываться друг в друга (как мы уже думали об этом с расчетом и дизайном, это легко).

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>