Организация миниатюр в галерею с помощью 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 и поделитесь ссылкой на запись в своих соц-сетях:
Большое спасибо за полезную статью, все работает на ура. Но есть вопрос. Каким образом можно добавить текст (ссылку) внизу каждой миниатюры без разрушения строя миниатюр?
Это всего лишь пример быстрой компоновки миниатюр, для интеграции подписей, конструкция будет несколько сложнее, можете сделать наложение подписей на картинку, или всплывающими при наведении. Что касаемо данного макета, набросал небольшой пример: Тынц, поковыряйтесь в исходниках и думаю принцип станет вам понятен
Большое спасибо за пример, получилось даже лучше, чем хотелось. С нетерпением жду новых выпусков.
В IE каждое новое изображение опускается ниже предыдущего (s019.radikal.ru/i640/1501/4a/8f0accc08591.jpg) и нет эффектов. Как это исправить?
Здравствуйте, Олег.
Ещё раз всё проверил в разных версиях IE, демо в том виде как оно есть, отображается корректно вплоть до IE8, на версии IE7 и ниже я давно забил, выравнивание с помощью
float:начинает работать с IE8. Если для вас так критично вести археологические раскопки, можете воспользоваться другими методами расстановки элементов.Как раз то,что я искал!
Спасибо!
А можно ещё сделать,чтобы картинки не подгонялись под размер 100×100. Т.е чтобы просто показывался какой-то фрагмент от картинки размером 100×100?