Свойство max-width

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

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

Синтаксис

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

Пример

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

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

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

Результат:

Пример

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

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

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

Результат:

Вижте също