Галерея изображений на CSS
Выпадающие меню вкладывают списки под ссылки. Галерея изображений — другой компонент: спокойная сетка миниатюр, которую удобно просматривать. Сделайте размер thumbs одинаковым, дайте ряду переноситься, обрезайте через object-fit, а глубокие адаптивные сетки оставьте следующим модулям Flexbox и Grid.
Набор инструментов галереи
📊 Галерея изображений кратко
| Часть | Повседневная роль |
|---|---|
| Список галереи | Обёртка, раскладывающая thumbs в переносимый ряд или сетку |
| Размер thumb | Общая ширина/высота, чтобы набор выглядел ровно |
object-fit: cover |
Заполняет рамку thumb без уродливого растяжения |
| Gap / margin | Воздух между изображениями |
| Подсказка hover | Мягкая обратная связь без скачков вёрстки |
| Подпись | Опционально figure/figcaption для смысла |
Используйте настоящие элементы <img> с полезным alt. Чисто декоративные спрайты — в другом месте: галереи обычно контент.
Flex-галерея с переносом
Flex-контейнер с wrap превращает список thumbs в адаптивный ряд, который переходит на следующую строку. Gap держит отступы честными.
.gallery {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
list-style: none;
margin: 0;
padding: 0;
}
Общая рамка thumb + cover
Дайте каждому изображению одну и ту же рамку, затем обрежьте через cover, чтобы портреты и пейзажи делили один ритм.
.gallery img {
width: 160px;
height: 120px;
object-fit: cover;
display: block;
border-radius: 0.35rem;
}
Figures и подписи
Когда важна подпись, оберните изображение в figure и добавьте figcaption. Держите текст подписи коротким под thumb.
.gallery figure {
margin: 0;
width: 160px;
}
.gallery figcaption {
margin-top: 0.35rem;
font-size: 0.85rem;
color: #555;
}
Мягкая обратная связь hover
Слегка приглушите или осветлите при наведении. Избегайте огромных scale, которые толкают соседей, если не планируете наложение аккуратно.
.gallery a:hover img {
opacity: 0.88;
outline: 2px solid #0b5fff;
outline-offset: 2px;
}
Спокойная привычка галереи
Ровные рамки thumbs, wrap + gap, object-fit: cover, осмысленный alt. Для продвинутой адаптивной вёрстки берите следующие уроки Flex/Grid — не путайте это с выпадающими меню.
.gallery { /* wrapping track */ }
.gallery__item { /* each thumb cell */ }
.gallery__img { /* the img */ }
.gallery__cap { /* optional caption */ }
Попробуйте сами
- Соберите список
.galleryна flex wrap со ссылками на изображения. - Задайте общую ширину/высоту и
object-fit: cover. - Добавьте
figure/figcaptionк одному элементу. - Стилизуйте мягкий hover (opacity или outline).
- Напишите одно предложение: чему Grid научит лучше, чем этот набросок с wrap?
Частые ошибки
- Случайные высоты без общей рамки или object-fit
- Нулевой gap, из‑за чего thumbs слипаются
- Относиться к галереям как к вложенным dropdown
- Absolute для каждого thumb в хрупкой куче
- Пустой
altу осмысленных фото
Итог
- Галереи — переносимые наборы ровных миниатюр
- Общий размер +
object-fit: coverдержат ритм аккуратным - Flex wrap + gap — спокойная стартовая вёрстка
- Подписи и hover остаются опциональными и лёгкими
- Модули Flexbox/Grid дальше углубляют адаптивные галереи
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху