Отзывчивый выход объекта за пределы сетки CSS HTML. Интересный случай с контейнером.

YOUTUBE · 01.12.2025 09:35

Ключевые темы и таймкоды

Проблема с дизайном

0:01

В видео обсуждается проблема с дизайном, когда элементы дизайна выходят за пределы ограничивающего контейнера.
Это может происходить из-за того, что монитор или пользователи могут быть шире, чем полотно, предоставленное дизайнером.

Решение проблемы

1:24

Для решения проблемы, автор предлагает создать HTML-структуру с классом "action" и "suction".
Внутри секции "content" размещается ограничивающий контейнер с классом "action".
Внутри контейнера размещается объект "body" и элементы дизайна: "title" и "text".

Адаптация к разным экранам

3:07

Автор создает flex-контейнер на экранах выше 767 пикселей.
Он задает ограничения контейнеру: максимальная ширина 1320 пикселей, отступы слева и справа по 20 пикселей.
Для адаптации к разным экранам, автор использует медиазапросы.
Он обращается к секции "image" и задает размер flex-элемента: "flex: 0 0 50%".
Это позволяет картинке вернуться на место и убрать горизонтальный scroll.
Автор также задает отступы сверху, снизу и справа для секции "content".

Адаптивное размещение контента

8:04

Создание контейнера с дисплеем flex и line-height для размещения контента по центру относительно изображения.
Решение проблемы с картинкой, которая уменьшается при изменении размера экрана.

Адаптивное изображение

10:57

Использование объекта fit со значением color для адаптивного размещения изображения внутри контейнера.
Адаптация изображения к ширине экрана с помощью медиазапросов.

Адаптация изображения для больших экранов

16:46

Создание медиазапроса для устройств с шириной экрана больше 1300 пикселей.
Использование формулы для вычисления компенсации для изображения.
Упрощение формулы для вычисления компенсации.