Свойство max-width устанавливает максимальную ширину элемента. Обычно задается для элемента с плавающей шириной (ширина задана в процентах или не задана вообще, а элемент по ширине раздвигается своим содержимым). Если ширина элемента задана в процентах - при увеличении окна браузера она будет увеличиваться пока не достигнет значения max-width.

Синтаксис

селектор {
	max-width: CSS единицы | проценты |  none |  inherit;
}

Значения

Значение Описание
CSS единицы Устанавливает максимальную ширину в заданных единицах.
Проценты Минимальная ширина элемента вычисляется в зависимости от ширины родительского элемента.
none Минимальная ширина не задана.
inherit Наследует значение родителя.

Значение по умолчанию: none.

Примеры

Пример

В данном примере ширина составляет процент от ширины родителя - в нашем случае это body. Увеличьте окно браузера по ширине, и контейнер тоже увеличиться, чтобы подстроиться под ширину окна браузера. Однако он будет увеличиваться только до величины, определенной в max-width, это 900px. Как только контейнер достигнет этой ширины - он перестанет увеличиваться:

#elem {
	border: 1px solid black;
	width: 70%;
	max-width: 900px;
	height: 100px;
}

Посмотреть пример.

Пример

В данном примере ширина контейнера ограничена с обоих сторон: он не сможет стать больше 900px и меньше 400px:

#elem {
	width: 70%;
	min-width: 400px;
	max-width: 900px;
	height: 100px;
	border: 1px solid black;
}

Посмотреть пример.