Выполнить »
×
Изменить ориентацию
Открыть на Codepen
Изменить тему, Темная/Светлая
<!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="../images/img_5terre_css.jpg"> <img src="../images/img_5terre_css.jpg" alt="Cinque Terre" width="600" height="400"> </a> <div class="desc">Добавьте описание изображения здесь</div> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="../images/img_forest.jpg"> <img src="../images/img_forest.jpg" alt="Forest" width="600" height="400"> </a> <div class="desc">Добавьте описание изображения здесь</div> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="../images/img_lights.jpg"> <img src="../images/img_lights.jpg" alt="Northern Lights" width="600" height="400"> </a> <div class="desc">Добавьте описание изображения здесь</div> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="../images/img_mountains.jpg"> <img src="../images/img_mountains.jpg" alt="Mountains" width="600" height="400"> </a> <div class="desc">Добавьте описание изображения здесь</div> </div> </div> <div class="clearfix"></div> <div style="padding:6px;"> <p>В этом примере используются медиа-запросы для переупорядочения изображений на экранах разных размеров: для экранов шириной более 700 пикселей будут отображаться четыре изображения рядом, для экранов меньше 700 пикселей будут отображаться два изображения рядом. Для экранов меньше 500 пикселей изображения будут складываться вертикально (100%).</p> <p>Вы узнаете больше о медиа-запросах и адаптивном веб-дизайне позже в нашем учебнике по CSS.</p> </div> </body> </html>
