</> Praktum

Главная / CSS / CSS max-width

Справочник CSS

Max-width: ограничиваем рост элемента

max-width задаёт верхний предел ширины. Элемент может быть уже, но не станет шире установленного значения.

Контейнер

.container {
  width: calc(100% - 32px);
  max-width: 1120px;
  margin-inline: auto;
}

Так контейнер имеет поля на телефоне и перестаёт расти на широком мониторе.

Длина строки

.article-text { max-width: 70ch; }

Единица ch удобна для ограничения длины текстовой строки.

Изображения

img { max-width: 100%; height: auto; }

Изображение не выйдет за пределы родителя и сохранит пропорции.

Ошибки

  • Задан max-width, но блок остаётся строчным.
  • Контейнер не получает auto-отступы для центрирования.
  • Для текста используют слишком большую длину строки.

Попробуй

Создай адаптивный контейнер шириной до 960px и текстовую колонку до 68ch.

Как ограничивать размер без потери адаптивности

max-width задаёт верхнюю границу, но не заставляет элемент занимать её целиком. Изображение с max-width: 100% уменьшается внутри узкого контейнера, а текстовый блок с max-width в символах сохраняет комфортную длину строки. Для центрального контейнера ограничение обычно сочетают с width и автоматическими внешними отступами.

У max-width приоритет выше, чем у width: если width равен 900px, а max-width — 600px, итоговая ширина не превысит 600px. Для компонентов полезны значения в rem или ch, а для общего макета — min() и calc(), которые одновременно учитывают экран и безопасные поля.

Разберём рабочий пример

.page {
  width: min(100% - 32px, 1120px);
  margin-inline: auto;
}

.article-text { max-width: 68ch; }
img { max-width: 100%; height: auto; }

Не копируй пример вслепую: измени данные, убери одну строку и посмотри, как меняется результат. Такой эксперимент быстрее показывает роль каждой части кода, чем простое чтение.

Проверка перед использованием

  • Контейнер может сжиматься ниже ограничения.
  • У текста комфортная длина строки.
  • Изображения не выходят за родителя.
  • В расчёте оставлены поля для маленького экрана.

Попробуй в браузере

Измени код и нажми «Запустить». Результат появится ниже.

Практикум по теме

Ещё в разделе CSS