<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h2>Адаптивная галерея изображений</h2>

<h4>Измените размер окна браузера, чтобы увидеть эффект.</h4>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_5terre.jpg">
      <img src="img_5terre.jpg" alt="Чинкве-Терре" width="600" height="400">
    </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="Лес" width="600" height="400">
    </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="Северное сияние" width="600" height="400">
    </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="Горы" width="600" height="400">
    </a>
    <div class="desc">Добавьте описание изображения здесь</div>
  </div>
</div>

<div style="padding:6px;">
  <p>В этом примере используются медиа-запросы для переупорядочивания изображений на экранах разных размеров: для экранов шириной более 700 пикселей будут показаны четыре изображения рядом, для экранов шириной менее 700 пикселей будут показаны два изображения рядом. Для экранов шириной менее 500 пикселей изображения будут сложены вертикально (100%).</p>
</div>

</body>
</html>

Сообщить об ошибке: