Как правильно создавать контейнеры с фото или картинками на своей странице?

Question

[Илья Пирожок]

В общем верстаю быстро и не плохо НО всегда натыкаюсь на одно проблему которая кажется простой для большинства. Как вы делаете адаптивные списки фотографий(картинок, иконок).
1) Через ul>li>img или ul>li>a>img
2) Через блоки div или span
Я понимаю что случаи разные бывают но все же. Конкретно у меня постоянно проблемы при адаптировании страницы под планшеты и телефоны, картинки становятся то большими то очень мелкими и постоянно съезжают куда то. Вроде задача легкая но увы..
Вопрос конечно easy но надеюсь что объяснят доступно. Спасибо
Перепробовал все, но не могу сделать элементарного. Прошу киньте готовый пример.

Answer 1

[vvvadimos]

я не использую ul li для картинок, использую дивы или спаны, у меня всегда было так, что длинна для картинок всегда одинаковая, и на разных разрешениях ее меняю, в % обычно.
у вас не такой случай? т.е. разные картинки по ширине?

Comments

[Илья Пирожок]

Точно такой случай! Обычно так всегда, фото одинакового размера. Страница на Bootstrap. То есть создать нужное кол-во блоков, казать им например width: 25%, и потом уже через media изменять размер в %? А можно ли как то задать Bootstrap классы этим блокам что бы они сами адаптировались?)

[vvvadimos]

можно, вот тут про эти классы написано bootstrap-3.ru/css.php#grid

Answer 2

[abbrakadabbra]

1) Слишком вложенно. С недавнего времени использую БЭМ, и почти не использую каскадность, используя селекторы как в примере. Почему? БЭМ - гибче. Попробуйте поменять что-то в верстке - вся ваша каскадна яструктура сломается. В БЭМ этого не будет. Решение: просто задавайте тегу с картинкой свой класс и пишите туда стили какие нужно.
2) div - блочные, span - строчные. Они встраиваются по разному в сетке. Вам что нужно? Подозреваю, что div в вашем случае то что нужно.

По вопросу не понятно что вы хотите сделать.

Comments

[Илья Пирожок]

Скажу кратко. Есть список из 8 фотографий (примеры блюд). Они расположены в отдельной секции "Примеры работ". Располагаются по 4 фото в два ряда, размеры одинаковые. Мне нужно сделать что бы они изменялись в размерах при уменьшении собственно размеров дисплея или при уменьшении они соскакивали уже не в 2 ряда а в 3 например. Я вроде понимаю как делать но код написать не могу

[abbrakadabbra]

kamikadze1996: тогда логически нужно использовать проценты, а не пикселы для ширины блоков. Я задаю width: 100% (нужное подберете), но при этом указываю max-width: (например 300px)! Потому-что если картинка маленькая, а разрешение большое, то она увеличится неприлично, и потеряет качество.

Answer 3

[Пётр Попов]

Поместите картинку в блок (div или li - без разницы), который будет менять свою ширину адаптивно. И пропишите в .css такие правила:

img {
  max-width: 100%;
  height: auto;
}

Сам блок, который содержит картинку можно хоть float'ом позиционировать. Главное в самой разметке явно размер изображения не задавать.