Мобильная версия галереи изображений

Question

Я создаю галерею изображений для сайта. Изображения отображаются в виде сетки: на каждой строке есть три изображения, когда я открываю страницу на своем компьютере, но я могу получить более или менее в зависимости от ширины окна. Это совсем не выглядит плохо, но я хотел бы улучшить его, так что он отображает только два изображения или только одну строку в зависимости от размера экрана. Я мог бы использовать медиа-запросы, но у меня только плохие воспоминания о них, и я хотел бы избежать их использования, если это возможно. Вот что мой HTML выглядит следующим образом:

<div id="image_container"> 
    <div style="background: url("image 1 url") center center no-repeat"></div> 
    <div style="background: url("image 2 url") center center no-repeat"></div> 
    (....) 
    <div style="background: url("image x url") center center no-repeat"></div> 
    <span style="display:block; clear: both;"></span> 
</div> 

и CSS:

#image_container{ 
     width: 95%; 
     margin: 5% auto; 
     border-radius: 10px; 
     border: 1px solid grey; 
    } 

#image_container>div{ 
     float: left; 
     width: 290px; 
     height: 164px; 
     margin: 2px; 
     overflow: hidden; 
     border-radius: 5px; 
    } 

Благодарности

Answer 1

Если вы готовы использовать рамки как Bootstrap, вы могли бы использовать систему сетки, чтобы получить довольно много, что вы ищете, не делая медиа запросов самостоятельно. Вам просто нужно будет разметить так:

<div id="image_container"> 
    <div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div> 
    <div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div> 
    <div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div> 
    <div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div> 
</div> 

Пока количество изображений, отображаемых на каждой строке является фактором 12 (1, 2, 3, 4 или 6), то вы всегда будете иметь полный строк.

Answer 2

Дешевый способ сделать это, чтобы изменить это в #image_container>div:

width: 100%; 
max-width: 290px; 

Этот трюк гарантирует, что на слишком маленьких экранах изображение будет занимать только ширину экрана, а не t он указал 290px.

Теперь вам нужно сохранить соотношение сторон. Для этого сначала вычислите его: 164/290 = 56.55%. Возьмите это значение, удалите height из ваших стилей, и добавить:

#image_container>div:before { 
    display: block; 
    content: ''; 
    padding-top: 56.55%; 
} 

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

С этими комбинированными вашими коробками будут оставаться одинаковые формы, но они просто уменьшаются, если не хватает места.

Тем не менее, две точки для Вас:

1. СМИ запросы не все плохо. Может быть, вы просто делали с ними что-то не совсем правильное. Я бы предложил снова рассмотреть их, поскольку они очень сильны.

2. Как правило, наименьшая ширина, о которой вам нужно беспокоиться, составляет 320 пикселей, ширина iPhone. Я еще не сталкивался с меньшим экраном, чем это, поэтому ваши 290px-боксы должны быть в порядке.