Масшабируемость флексбоксов при условии сохранения пропорции ширины и высоты блоков.

Вот есть три блока: 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” (который анализирует ширину экрана), то он будет идеально сохранять нужные пропорции любого блока, который нам нужен :slight_smile:

Результат: https://jsfiddle.net/8qg6bzL2/10/

1 лайк