Узнайте, как создать адаптивную галерею изображений используя HTML, CSS.
Галерея изображений
Измените размер окна браузера, чтобы увидеть адаптивный эффект:
Добавьте описание изображения здесь
Добавьте описание изображения здесь
Добавьте описание изображения здесь
Добавьте описание изображения здесь
Создать галерею изображений
Шаг 1) Добавить HTML:
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre">
</a>
<div class="desc">Добавьте описание изображения здесь</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank"
href="img_forest.jpg">
<img
src="img_forest.jpg" alt="Forest">
</a>
<div class="desc">Добавьте описание изображения здесь</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights">
</a>
<div class="desc">Добавьте описание изображения здесь</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank"
href="img_mountains.jpg">
<img
src="img_mountains.jpg" alt="Mountains">
</a>
<div class="desc">Добавьте описание изображения здесь</div>
</div>
</div>
<div class="clearfix"></div>
Шаг 2) Добавить CSS:
В этом примере используются медиазапросы для переупорядочивания изображений на экранах разных размеров: для экранов шириной более 700 пикселей будут показаны четыре изображения рядом, для экранов шириной менее 700 пикселей будут показаны два изображения рядом. Для экранов шириной менее 500 пикселей изображения будут располагаться вертикально (100%):
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and
(max-width: 700px) {
.responsive {
width:
49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
Попробуйте сами »
Совет: перейдите к нашему Учебнику по HTML-изображениям, чтобы узнать больше об изображениях.
Совет: перейдите к нашему Учебнику по CSS-стилю изображений, чтобы узнать больше о том, как стилизовать изображения.