• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Адаптивное выравнивание изображений в CSS (Адаптивное выравнивание изображений на всю ширину браузера)
Адаптивное выравнивание изображений в CSS
Kosten
Дата: Среда, 2019-08-21, 21:25 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24630
Награды: 57


Рассмотрим не сложный пример как адаптивно выстроить несколько картинок или изображений, которые выстроятся на на всю ширину окна браузера. Это отличное решение поможет веб разработчику поставить изображение, которое бы смотрелось корректно на большом мониторе, а также на мобильных аппаратах, где уже будет по всей ширине. Если изначально мы делаем в 2 колонки, то на экране они уже по всей ширине в вертикальном положение.

Две картинки по горизонтали:



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

HTML

Код
<div class="adaptivnos-kartinki">
    <a href="#"><img src="http://zornet.ru/CSS-ZORNET/ASABAG/city-1.jpg" alt=""></a>
    <a href="#"><img src="http://zornet.ru/CSS-ZORNET/ASABAG/city-2.jpg" alt=""></a>    
    <a href="#"><img src="http://zornet.ru/CSS-ZORNET/ASABAG/city-3.jpg" alt=""></a>
    <a href="#"><img src="http://zornet.ru/CSS-ZORNET/ASABAG/city-4.jpg" alt=""></a>    
</div>

CSS

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

Также закреплена demo страница.

Демонстрация

Три картинки по горизонтали:



HTML

Код
<div class="adaptivnos-kartinki">
    <a href="#"><img src="http://zornet.ru/CSS-ZORNET/ASABAG/city-1.jpg" alt=""></a>
    <a href="#"><img src="http://zornet.ru/CSS-ZORNET/ASABAG/city-2.jpg" alt=""></a>    
    <a href="#"><img src="http://zornet.ru/CSS-ZORNET/ASABAG/city-3.jpg" alt=""></a>
    <a href="#"><img src="http://zornet.ru/CSS-ZORNET/ASABAG/city-4.jpg" alt=""></a>    
    <a href="#"><img src="http://zornet.ru/CSS-ZORNET/ASABAG/city-5.jpg" alt=""></a>
    <a href="#"><img src="http://zornet.ru/CSS-ZORNET/ASABAG/city-6.jpg" alt=""></a>    
</div>

CSS

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

На этом все!

Четыре картинки:



HTML

Код
<div class="adaptivnos-kartinki">
    <a href="#"><img src="http://zornet.ru/CSS-ZORNET/ASABAG/city-1.jpg" alt=""></a>
    <a href="#"><img src="http://zornet.ru/CSS-ZORNET/ASABAG/city-2.jpg" alt=""></a>    
    <a href="#"><img src="http://zornet.ru/CSS-ZORNET/ASABAG/city-3.jpg" alt=""></a>
    <a href="#"><img src="http://zornet.ru/CSS-ZORNET/ASABAG/city-4.jpg" alt=""></a>    
    <a href="#"><img src="http://zornet.ru/CSS-ZORNET/ASABAG/city-5.jpg" alt=""></a>
    <a href="#"><img src="http://zornet.ru/CSS-ZORNET/ASABAG/city-6.jpg" alt=""></a>    
    <a href="#"><img src="http://zornet.ru/CSS-ZORNET/ASABAG/city-7.jpg" alt=""></a>
    <a href="#"><img src="http://zornet.ru/CSS-ZORNET/ASABAG/city-8.jpg" alt=""></a>    
</div>

CSS

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

На этом установка завершена.

Осталось прописать медео, чтоб все эти изображение стали адаптивны для мобильный гаджет, что и делаем.

Для мобильных:



CSS

Код
@media screen and (max-width: 800px) {    
.adaptivnos-kartinki a {  
width: 100%;  
float: none;    
}
}

Прописываем стиль к выбранному варианту, где автоматически на небольшом экране картинка растягивается, только вертикальном положение становятся.
Прикрепления: 7861318.jpg(63.5 Kb) · 9178512.jpg(56.3 Kb) · 1646521.jpg(54.0 Kb) · 0193721.jpg(35.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Адаптивное выравнивание изображений в CSS (Адаптивное выравнивание изображений на всю ширину браузера)
  • Страница 1 из 1
  • 1
Поиск: