Как сделать чтобы img выходили за границы страницы, но не ломали фон?

Question

[Ruslan]

Адаптирую дизайн по макету. Всё сделал, осталось одно но. Мне нужно чтобы баннеры лежали горизонтально, типа как слайдер. Как на макете:



Но я не могу добиться этого. Когда ставлю их в линию, то они выходят за границы и ломают все:



Как это исправить?

Answer 1

[historydev]

Судя по всему баннеры на макете намёк на слайдер, остальное гуглите, могу посоветовать swiper.

Comments

[Ruslan]

Просто я прохожу обучение, это одно из дз. И тут не должно быть JS, только css+html

[MrBroccoli]

Ruslan, тогда добавь overflow: hidden

[Ruslan]

MrBroccoli, спасибо огромное!)

[Krotorator]

Тогда, вам, наверное, нужно сымитировать поведение слайдера. Скорее всего на мобильном слайдер выводил бы один слайд.
Используя медиазапрос для маленьких экранов, вы можете задать всем потомкам контейнера ваших картинок display:none. Кроме первой, конечно.

@media screen and(max-width: (N)px) {
            .parent .child:not(:first-of-type) {
                display: none;
            }
        }

Answer 2

[chelnokov_a]

Вам нужно сделать слайдер.
Но чисто технически этот вопрос можно решить задать родителю свойство overflow: hidden; Это и есть ответ на ваш вопрос. Но верное решение - слайдер.