Ответ 1
Чтобы сделать правильный ответ, я сначала разъясню требования:
- все изображения имеют одинаковое соотношение сторон: 3/2
- изображения не обрезаются
- Отсутствие пробела между изображениями
- сделать мозаику изображений
У вас могут быть тысячи возможностей для отображения ваших изображений. Я собираюсь сделать простой макет, который должен показать вам способ создания собственного.
Вот FANCY FIDDLE того, что вы можете достичь, и вот что это выглядит:
Первый шаг: подумайте, подумайте и подумайте
Сначала:. Чтобы сделать его простым, пусть ваши изображения могут иметь 3 размера (я изменил размер изображения на 1 пиксель, чтобы упростить вычисления):
- большой:
328*492px - средний, 1/2 большой:
164*246px - маленький, 1/4 большого:
82*123px
Второй:. Поскольку ваши изображения - все портреты, а ваш контейнер имеет ту же высоту, что и большое изображение, вам придется работать с столбцами высотой 492px, которые могут иметь 3 ширины:
- big:
328pxwide, они могут отображать изображения всех размеров - medium:
328/2 = 164pxwide, они могут отображать средние и маленькие изображения - small:
327/4 = 82pxwide, они могут отображать только небольшие изображения
В-третьих: Сколько столбцов и размеры изображений? Это зависит от вас, вам придется сделать выбор в соответствии с общей шириной вашего контейнера и количеством изображений, которые вы хотите отобразить.
Но в вашей скрипке контейнер (._pictures1) имеет ширину 935px, которая будет невозможна с использованием ширины столбцов, выбранной ранее.
935/82 = 11.4024...
Ближе всего вы можете получить контейнер 82*12 = 984px.
Вам придется либо изменить ширину контейнера, либо изменить размеры изображений и столбцов, чтобы они соответствовали вашей начальной ширине.
Или (спойлер) вы можете работать с процентами, это может быть альтернативой, если вам нужно, чтобы ваш макет был отзывчивым, но это может осложниться, и я стараюсь сделать все просто.
Как я уверен, вам любопытно и хотите проверить это, вот пример макета в
Отзывчивая мозаика изображения
Следующий шаг: дизайн макета
Используйте ручку, фотошоп или любой другой инструмент, который вам подходит, если вы действительно хороши, вы даже можете использовать свой мозг, чтобы мысленно представить макет, который вы хотите.
Я разработал изображение, которое вы можете увидеть при большом ответе.
Как я уже говорил, есть много возможностей макета (количество столбцов и размеры изображений в этих столбцах), поэтому для примера я выбрал 2 больших столбца 1 средний и 2 маленьких
328*2+164+82*2 = 984px ( = width of container so it can fit!)
Последний шаг: начните кодирование!
Вы можете увидеть результат в этом
FIDDLE
Этот макет основан на плаваниях, поэтому нам нужно определить ширину, высоту контейнера, столбцы, изображения, чтобы они могли хорошо сочетаться друг с другом ( как мы уже думали об этом с расчетами и дизайном, это легко).
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>