Справочник HTML & CSS

max-width

Максимальная ширина: элемент может быть уже, но не шире.

Синтаксис

max-width: value;

Значения

Параметр	Тип	Описание
px	length	Предел в пикселях.
%	percentage	Процент от родителя; `100%` не даёт выйти за пределы родителя.
ch	length	Ширина символа «0»; `65ch` — удобная длина строки для текста.

Примеры

Колонка содержимого по центру страницы:

<style>
  .page { max-width: 300px; margin: 0 auto; background: whitesmoke; padding: 8px; }
</style>
 
<div class="page">On a wide screen this block is 300px wide and centered; on a narrow one it shrinks with the window.</div>

Картинка не шире своего контейнера:

<img src="/media/photo-800x500.jpg" alt="" style="max-width: 100%; height: auto;">

Примечания

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

См. также

width — Ширина элемента.
min-width — Минимальная ширина: уже элемент стать не может.
@media — Применяет правила только при заданных условиях — ширине окна, теме системы и других.
margin — Внешний отступ элемента — расстояние до соседей.

Вопросы и ответы по теме

В учебнике

Блочная модель — Из чего состоит элемент в CSS — содержимое, padding, border и margin, размеры, центрирование и box-sizing.

Спасибо, что читаете!