Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Организация миниатюр в галерею с помощью CSS

Организация миниатюр в галерею с помощью CSS

Предлагаю коротенький фрагмент кода CSS, с помощью которого вы легко сможете выстроить изображений в стройную сетку, привычный всем макет галереи.

Для размещения миниатюр, используем простой неупорядоченный список <ul>, который в зависимости от размера картинок, будет автоматом выстраиваться в идеально расчерченную сетку, с равными отступами между каждой картинкой.

HTML

<ul>
    <li><a href="#"><img src="https://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="https://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="https://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="https://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="https://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="https://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="https://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="https://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="https://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="https://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="https://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="https://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="https://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="https://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="https://placehold.it/100x100"></a></li>
    <li><a href="#"><img src="https://placehold.it/100x100"></a></li>    
  </ul>

В примере добавил легкую тень, появляющуюся у картинок в момент наведения на них, опция, как вы понимаете, не обязательная))).

CSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
li img {
  float: left;
  margin: 10px;
  border: 5px solid #fff;
  width: 100px;
  height: 100px;
}

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 6

  • Сергей: 11 февраля, 2015 в 21:44

    Большое спасибо за полезную статью, все работает на ура. Но есть вопрос. Каким образом можно добавить текст (ссылку) внизу каждой миниатюры без разрушения строя миниатюр?

    Ответить
    • driver: 12 февраля, 2015 в 12:33

      Это всего лишь пример быстрой компоновки миниатюр, для интеграции подписей, конструкция будет несколько сложнее, можете сделать наложение подписей на картинку, или всплывающими при наведении. Что касаемо данного макета, набросал небольшой пример: Тынц, поковыряйтесь в исходниках и думаю принцип станет вам понятен

      Ответить
      • Сергей: 12 февраля, 2015 в 17:21

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

        Ответить
  • Олег: 1 декабря, 2015 в 12:07

    В IE каждое новое изображение опускается ниже предыдущего (s019.radikal.ru/i640/1501/4a/8f0accc08591.jpg) и нет эффектов. Как это исправить?

    Ответить
    • driver: 1 декабря, 2015 в 20:41

      Здравствуйте, Олег.
      Ещё раз всё проверил в разных версиях IE, демо в том виде как оно есть, отображается корректно вплоть до IE8, на версии IE7 и ниже я давно забил, выравнивание с помощью float: начинает работать с IE8. Если для вас так критично вести археологические раскопки, можете воспользоваться другими методами расстановки элементов.

      Ответить
  • Антон: 2 апреля, 2016 в 13:22

    Как раз то,что я искал!
    Спасибо!
    А можно ещё сделать,чтобы картинки не подгонялись под размер 100×100. Т.е чтобы просто показывался какой-то фрагмент от картинки размером 100×100?

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>