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