• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Адаптивное выравнивание изображений на CSS (Вертикальное адаптивное выравнивание изображения)
Адаптивное выравнивание изображений на CSS
Kosten
Дата: Понедельник, 2019-09-09, 03:20 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25268
Награды: 58


Давайте рассмотрим простой вид изображение, что идет как адаптивное выравнивание изображений, где рассчитана на всю ширину браузера. Теперь вы можете выставить в блок или на страницу картинки, что будут представлены в большом количестве. Где корректно смотрятся на мониторе, и на всех мобильных аппаратах.



HTML

Код
<div class="adaptivno-vuravnivan">
    <a href="#"><img src="http://zornet.ru/_fr/83/0272542.jpg" alt=""></a>
    <a href="#"><img src="http://zornet.ru/_fr/83/1930484.jpg" alt=""></a>    
    <a href="#"><img src="http://zornet.ru/_fr/83/6243616.jpg" alt=""></a>
    <a href="#"><img src="http://zornet.ru/_fr/83/7443675.jpg" alt=""></a>    
    <a href="#"><img src="http://zornet.ru/_fr/83/1391148.jpg" alt=""></a>
    <a href="#"><img src="http://zornet.ru/_fr/83/4982205.jpg" alt=""></a>    
    <a href="#"><img src="http://zornet.ru/_fr/83/9939802.jpg" alt=""></a>
    <a href="#"><img src="http://zornet.ru/_fr/83/9022730.jpg" alt=""></a>    
</div>

CSS

Код
.adaptivno-vuravnivan {
    text-align: center;
    margin: 0 0 20px 0;
    overflow: hidden;    
}
.adaptivno-vuravnivan a {
    width: 25%;
    display: block;
    float: left;
    line-height: 0;
}
.adaptivno-vuravnivan img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 800px) {
    .adaptivno-vuravnivan a {
  width: 100%;
  float: none;
    }
}

Это не сложный вариант, для того как правильно показывало несколько изображений на всю ширину окна браузера.

Демонстрация
Прикрепления: 1225917.jpg(65.0 Kb) · css.zip(2.3 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Адаптивное выравнивание изображений на CSS (Вертикальное адаптивное выравнивание изображения)
  • Страница 1 из 1
  • 1
Поиск: