Рассмотрим не сложный пример как адаптивно выстроить несколько картинок или изображений, которые выстроятся на на всю ширину окна браузера. Это отличное решение поможет веб разработчику поставить изображение, которое бы смотрелось корректно на большом мониторе, а также на мобильных аппаратах, где уже будет по всей ширине. Если изначально мы делаем в 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;
}
}
Прописываем стиль к выбранному варианту, где автоматически на небольшом экране картинка растягивается, только вертикальном положение становятся.
