Proprietatea max-width

Proprietatea max-width stabilește lățimea maximă a elementului. Valorile proprietății pot fi orice unități de măsură sau cuvântul cheie none, care indică absența unei valori.

De obicei, proprietatea este setată pentru un element cu lățime fluidă (lățimea este dată în procente sau nu este setată deloc, iar elementul se lățește în funcție de conținut). Dacă lățimea elementului este dată în procente - atunci când fereastra browserului este mărită, aceasta va crește până când atinge valoarea max-width.

Sintaxă

selector {
	max-width: valoare;
}

Exemplu

În acest exemplu, lățimea este un procent din lățimea părintelui. Măriți lățimea ferestrei browserului, și containerul se va mări și el, pentru a se adapta la lățimea ferestrei browserului. Cu toate acestea, acesta se va mări doar până la valoarea definită în max-width, adică 900px. Odată ce containerul atinge această lățime - acesta nu se va mai mări:

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

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

Exemplu

În acest exemplu, lățimea containerului este limitată pe ambele părți: acesta nu poate deveni mai mare de 900px și mai mic de 400px:

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

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

Vezi și

proprietatea min-width,
care stabilește lățimea minimă a elementului
proprietatea max-height,
care stabilește înălțimea maximă a elementului
proprietatea min-height,
care stabilește înălțimea minimă a elementului