Свойство max-width

Свойството max-width задава максималната ширина на елемент. Стойности на свойството са всякакви единици за размери или ключовата дума none, която означава липса на стойност.

Обикновено свойството се задава за елемент с плаваща ширина (ширината е зададена в проценти или не е зададена изобщо, а елементът по ширина се разширява от съдържанието си). Ако ширината на елемента е зададена в проценти - при увеличаване на прозореца на браузъра тя ще се увеличава, докато достигне стойността max-width.

Синтаксис

селектор {
	max-width: стойност;
}

Пример

В този пример ширината съставлява процент от ширината на родителя. Увеличете ширината на прозореца на браузъра, и контейнерът също ще се увеличи, за да се настрои спрямо ширината на прозореца на браузъра. Въпреки това, той ще се увеличава само до стойността, определена в max-width, това са 900px. Щом контейнерът достигне тази ширина - той ще спре да се увеличава:

<div id="elem"></div>

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

Пример

В този пример ширината на контейнера е ограничена от двете страни: той няма да може да стане по-голям от 900px и по-малък от 400px:

<div id="elem"></div>

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

Вижте също

свойството min-width,
което задава минимална ширина на елемент
свойството max-height,
което задава максимална височина на елемент
свойството min-height,
което задава минимална височина на елемент