Простой пример как адаптивно выстроить несколько изображений на всю ширину окна браузера.
<div class="photos">
<a href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-2.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-3.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-4.jpg" alt=""></a>
</div>
.photos {
text-align: center;
margin: 0 0 20px 0;
overflow: hidden;
}
.photos a {
width: 50%;
display: block;
float: left;
line-height: 0;
}
.photos img {
width: 100%;
height: auto;
}
<div class="photos">
<a href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-2.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-3.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-4.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-5.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-6.jpg" alt=""></a>
</div>
.photos {
text-align: center;
margin: 0 0 20px 0;
overflow: hidden;
}
.photos a {
width: 33.3%;
display: block;
float: left;
line-height: 0;
}
.photos img {
width: 100%;
height: auto;
}
<div class="photos">
<a href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-2.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-3.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-4.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-5.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-6.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-7.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-8.jpg" alt=""></a>
</div>
.photos {
text-align: center;
margin: 0 0 20px 0;
overflow: hidden;
}
.photos a {
width: 25%;
display: block;
float: left;
line-height: 0;
}
.photos img {
width: 100%;
height: auto;
}
Добавим стили, которые выведут фото по вертикали на мобильных с шириной экрана до 800px.