Как сверстать такую секцию?

Question

[wakenbyWork]

Есть такой макет:



Как можно ее сверстать чтобы фотографии уходил за container, но в адаптиве(при изменении экрана до 767px) не уезжали за экран а уменьшались по ширине/высоте?

Пытался найти что то по такой верстке, но не нашел ничего что могло бы помочь((

Answer 1

[Ankhena]

По аналогии

Comments

[wakenbyWork]

Ankhena, Добрый день! Выходные были не заходил на сайт)) выглядит круто, спасибо за пример, попробую под свои задачи его адаптировать!))

[wakenbyWork]

Еще раз спасибо за ваш ответ! Я на глаз исправил width, и margin-left
и вроде бы заработало, но я не уверен правильно ли, проверите пожалуйста?))

[Ankhena]

wakenbyWork,

проверите пожалуйста

Я проверить?

Макет подложите и проверьте, так блоки располагаются как вам нужно или нет на макетной ширине.
А дальше просто изменяйте ширину вьюпорта и проверяйте, нравится вам так или нет.

Answer 2

[ArtJH]

в десктоп версии этим фоткам дай отрицательный марджин left или right
а в мобилке верни его на 0

Comments

[cheugy psyops]

нойс

[wakenbyWork]

Если бы это был рабочий вариант, я бы не задавал вопросов, прочитайте текст вопроса для начала. Мне необходимо до планшета сохранять структуру чтобы фотографии не вылетали за экран, ваш способ не рабочий, при сжатии экрана фотографии будут улетать за экран

[ArtJH]

wakenbyWork, Фотографии вылетают за экран, так как тут уже вопрос в адаптивности.
1) у фотографий задан размер в px или em или %?
2) Есть у них max-width: 100% ? Если все правильно сделали, то при уменьшении экрана картинки тоже уменьшаются в зависимости от его контейнера

Я не раз верстал подобную структуру и знаю как это реализовывается.

[wakenbyWork]

ArtJH, Добрый день! Фотографии задавал ширину от vw, и она уменьшалась но при адаптивности все равно уезжала. Типа контейнер начинает сжиматься и она уезжает парлельно уменьшаясь в размерах. Пробовал и margin в пройентах и в vw писать не помогло