Вот есть три блока: https://jsfiddle.net/8qg6bzL2/6/
Задача: при растягивании общего бокса все три контейнера (допустим с картинкой) не должны терять пропорцию ширины и высоты: 1х2.
upd: Все контейнеры должно быть приклеены друг к другу и к краю браузера, отступов по краям быть не должно. Обязателен: “no-wrap”.
Допустим, тогда каким образом это должно отображаться? Они должны центроваться внутри родителя, или между ними отступы становятся больше, например?
Все три блока должны менять масштаб. Например как на сайте: https://meduza.io
Если поиграться с растягиванием браузера, то начиная с разрешения: 1535px и далее, видно что картинки меняют масштаб. В коде наблюдаем, что все это реализовано флексами.
В коде наблюдаем, что картинки вставлены как background-image, для которых background-size: cover;
Нашел решение, нужно выставить единицы измерения высоты в “vw”.
Не “vh”?
1 лайк
Не, именно vw. Идея в том, что у кого-то ширина экрана 1920, а у кого-то 1600. У обоих должно отображаться идеально. Если дать ширине “% от общего блока” а высоте параметр “vw” (который анализирует ширину экрана), то он будет идеально сохранять нужные пропорции любого блока, который нам нужен 
Результат: https://jsfiddle.net/8qg6bzL2/10/
1 лайк