Галерея изображений CSS
Когда веб-страница показывает набор изображений организованным и часто адаптивным способом, это и есть галерея изображений CSS.
Её HTML состоит из двух уровней:
- Внешний контейнерный элемент, оборачивающий всю галерею (например,
<div>как обёртка галереи). - Внутри него ещё один контейнерный элемент для каждого изображения (например,
<div>для каждого элемента галереи), содержащий тег<img>и, возможно, описание.
Пример
Базовая галерея изображений, построенная с помощью flexbox, на HTML и CSS:
Prompt
Создайте CSS-галерею изображений с использованием flexbox. Контейнер галереи (div.gallery) использует display: flex и flex-wrap: wrap с justify-content: flex-start. Каждый элемент галереи (div.gallery-item) имеет margin 5px, border 1px solid #ccc и width 180px. При наведении граница меняется на 1px solid #777. Изображения внутри элементов галереи имеют width 100% и height auto. Div описания (div.desc) имеет padding 15px и text-align center. Включите четыре изображения: Cinque Terre (img_5terre.jpg), Forest (img_forest.jpg), Northern Lights (img_lights.jpg) и Mountains (img_mountains.jpg). Каждое изображение обёрнуто в тег ссылки с target="_blank" и имеет атрибуты width="600" height="400". Добавьте текст описания под каждым изображением.
Output: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Image Gallery</title>
<style>
div.gallery {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
div.gallery-item {
margin: 5px;
border: 1px solid #ccc;
width: 180px;
}
div.gallery-item:hover {
border: 1px solid #777;
}
div.gallery-item img {
width: 100%;
height: auto;
}
div.gallery-item div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<h2>Image Gallery</h2>
<div class="gallery">
<div class="gallery-item">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Cinque Terre</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Green Forest</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Northern Lights</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Mountains</div>
</div>
</div>
</body>
</html>
Адаптивная галерея изображений CSS
С помощью медиазапросов CSS изображения перестраиваются в зависимости от размера экрана:
- На экранах шире 768px — четыре изображения отображаются рядом
- На экранах уже 768px — два изображения отображаются рядом
- На экранах уже 480px — изображения располагаются вертикально (width: 100%)
Пример
Prompt
Создайте адаптивную CSS-галерею изображений с использованием flexbox и медиазапросов. Контейнер галереи (div.gallery) использует display: flex и flex-wrap: wrap с justify-content: flex-start. Каждый элемент галереи (div.gallery-item) имеет margin 5px, border 1px solid #ccc и использует процентную ширину, которая меняется в зависимости от размера экрана. При наведении граница меняется на 1px solid #777. Изображения внутри элементов галереи имеют width 100% и height auto. Div описания (div.desc) имеет padding 15px и text-align center. Используйте медиазапросы так, чтобы: если экран шире 768px, показывать четыре изображения рядом (каждый элемент около 24%); если экран уже 768px, показывать два изображения рядом (каждый элемент около 48%); если экран уже 480px, располагать изображения вертикально (каждый элемент шириной 100%). Включите четыре изображения: Cinque Terre (img_5terre.jpg), Forest (img_forest.jpg), Northern Lights (img_lights.jpg) и Mountains (img_mountains.jpg). Каждое изображение обёрнуто в тег ссылки с target="_blank" и имеет атрибуты width="600" height="400".
Output: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive CSS Image Gallery</title>
<style>
div.gallery {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
div.gallery-item {
margin: 5px;
border: 1px solid #ccc;
width: 24%;
}
div.gallery-item:hover {
border: 1px solid #777;
}
div.gallery-item img {
width: 100%;
height: auto;
}
div.gallery-item div.desc {
padding: 15px;
text-align: center;
}
@media screen and (max-width: 768px) {
div.gallery-item {
width: 48%;
}
}
@media screen and (max-width: 480px) {
div.gallery-item {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect!</h4>
<div class="gallery">
<div class="gallery-item">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Cinque Terre</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Green Forest</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Northern Lights</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Mountains</div>
</div>
</div>
<p>Here we use media queries to re-arrange the images on different screen sizes:</p>
<ul>
<li>If screen is larger than 768px wide - show four images side by side</li>
<li>If screen is smaller than 768px - show two images side by side</li>
<li>If screens is smaller than 480px - stack the images vertically (100%)</li>
</ul>
<p><strong>Tip:</strong> You will learn more about media queries later in our CSS Tutorial.</p>
</body>
</html>