Адаптивное выравнивание изображений на всю ширину браузера

Простой пример как адаптивно выстроить несколько изображений на всю ширину окна браузера.

1
<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>
HTML
.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;
}
CSS
2
<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>
HTML
.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;
}
CSS
3
<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>
HTML
.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;
}
CSS
4

Добавим стили, которые выведут фото по вертикали на мобильных с шириной экрана до 800px.

@media screen and (max-width: 800px) {
	.photos a {
		width: 100%;
		float: none;
	}
}
CSS
08.02.2019, обновлено 27.08.2019
14659
Следующая запись Фон под текстом

Комментарии 1

Андрей Кондратков Андрей Кондратков
18 января 2020 в 19:28
Спасибо большое. Мне начинающему сайтостроителю очень помог Ваш материал.Да и в целом очень хороший сайт.

, чтобы добавить комментарий.

Другие публикации

Модальное окно на затемненном фоне
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
67788
+23
Автоматическое сжатие и оптимизация картинок на сайте
Изображения нужно сжимать для ускорения скорости загрузки сайта, но как это сделать? На многих хостингах нет...
28151
+8
Адаптивные блоки YouTube
Видео YouTube вставляется через iframe, но он не адаптивен по высоте. Если задать width="100%", то он растянется на всю ширину родителя, но для высоты hight="100%" не работает.
8415
+3
Выравнивание блока по центру родителя
Примеры, как поместить элемент в центр родителя с помощью absolute, flexbox и grid layout.
29371
+6
Галерея из плиток заполняющая всю ширину
Сделать галерею которая заполнит все пространство фотографиями разного размера можно с помощью jQuery плагина...
10288
+4
Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
12471
+3