Как создать адаптивную галерею изображений с помощью CSS?
Создание адаптивной галереи изображений — это важная задача для фронтенд-разработчиков, особенно с учетом того, что современный веб требует хорошей отзывчивости дизайна. В этом ответе мы рассмотрим, как можно создать простую адаптивную галерею изображений с использованием HTML и CSS.
Шаг 1: HTML-структура
Сначала создадим основную структуру HTML для галереи. Мы будем использовать элемент <div> для контейнера галереи, а изображения обернем в теги <img>:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Адаптивная галерея изображений</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery">
<img src="image1.jpg" alt="Изображение 1">
<img src="image2.jpg" alt="Изображение 2">
<img src="image3.jpg" alt="Изображение 3">
<img src="image4.jpg" alt="Изображение 4">
<img src="image5.jpg" alt="Изображение 5">
<img src="image6.jpg" alt="Изображение 6">
</div>
</body>
</html>
Шаг 2: CSS для адаптивности
Теперь добавим стили в файл styles.css, чтобы сделать галерею адаптивной. Мы будем использовать Flexbox для выравнивания изображений:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* Разделим пространство между изображениями */
padding: 10px; /* Добавим отступы вокруг контейнера */
}
.gallery img {
max-width: 100%; /* Ограничим максимальную ширину изображений */
height: auto; /* Автоматическая высота для сохранения пропорций */
margin-bottom: 10px; /* Отступ снизу для каждого изображения */
flex: 1 1 calc(33.33% - 10px); /* Три изображения в ряд с отступом */
/* Это правило означает:
1. flex-grow: 1 (изображение может расти);
2. flex-shrink: 1 (изображение может сжиматься);
3. flex-basis: calc(33.33% - 10px) (идет расчет ширины с учетом отступа);
*/
}
/* Меньше изображений на меньших экранах */
@media (max-width: 768px) {
.gallery img {
flex: 1 1 calc(50% - 10px); /* Два изображения в ряд для экранов меньше 768px */
}
}
@media (max-width: 480px) {
.gallery img {
flex: 1 1 100%; /* Одно изображение в ряд для мобильных устройств */
}
}
Объяснение кода
alt для улучшения доступности.- Flexbox: Используется для того, чтобы изображения автоматически выстраивались в ряды, согласно заданным правилам.
- Пропорции: Изображения сохраняют свои пропорции благодаря
height: auto;. - Media Queries: При помощи медиа-запросов мы изменяем количество изображений в ряду в зависимости от ширины экрана — три изображения для больших экранов, два для средних, и одно для мобильных устройств.
Заключение
Теперь у вас есть простая адаптивная галерея изображений, которая будет хорошо отображаться на различных устройствах. Вы можете поэкспериментировать с количеством изображений в ряду и стилями, чтобы сделать вашу галерею уникальной. Не забывайте оптимизировать изображения для быстрого загрузки!