HTML/CSS

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

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

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>
.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;
}
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>
.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;
}
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>
.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;
}
4

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

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

@media screen and (max-width: 800px) {
    .photos a {
        width: 100%;
        float: none;
    }
}
08 февраля 2019
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
Цвет карты можно изменить начиная с версии 2.0 с помощью CCS фильтров, применив их к элементу .ymaps-layers-pane
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.