HTML & CSS: как не надо
Не задавайте контейнерам ширину, равную брикпойнтам
Это решение подходит для мобильных устройств, где прокрутки нет, но не годится для десктопных браузеров, где она есть и занимает место на странице.
Как это увидеть? #
Допустим, есть макет для страницы шириной 600px, контент должен занимать всю ширину. Зададим соответствующий код:
Но если требуется, чтобы размеры картинки не менялись, а всё, что не поместилось по ширине, просто обрезалось, тогда картинке нужна обёртка:
class="panorama"> class="panorama__img" src=". " alt=". "> Теперь центрируется обёртка, и она же отвечает за выравнивание картинки по центру:
.panorama position: relative; /* растягиваем по ширине окна */ width: 100vw; /* скрываем всё, что не поместилось в экран */ overflow: hidden; /* центрируем обёртку */ left: 50%; transform: translate(-50%); /* центрируем картинки */ display: flex; justify-content: center; > .panorama__img /* фиксируем ширину картинки */ width: 982px; /* отключаем max-width, если он было задано выше */ max-width: none; >На мобильных всё будет работать как задумано, но если открыть на десктопе, обнаружится горизонтальная прокрутка:
Потому что 100vw — это не ширина body , а вся ширина окна вместе с прокруткой, то есть элемент такой ширины на странице не поместится, что и вызовет появление горизонтальной прокрутки.
Чтобы решить эту проблему, ближайшему родителю широкой картинки, растянутому на всю ширину страницы, задайте overflow: hidden .
Горизонтальная прокрутка пропала, всё работает как надо.
Итого
Не задавайте контейнерам ширину, равную брикпойнтам, это может вызвать появление горизонтальной прокрутки в десктопных браузерах. Задавайте меньшую ширину или используйте паддинги/марджины для контейнеров с нефиксированной шириной.