Vlastnosť max-width

Vlastnosť max-width nastavuje maximálnu šírku elementu. Hodnotou vlastnosti sú akékoľvek jednotky pre veľkosti alebo kľúčové slovo none, čo znamená absenciu hodnoty.

Vlastnosť sa zvyčajne zadáva pre element s plávajúcou šírkou (šírka je zadaná v percentách alebo nie je zadaná vôbec, a element sa v šírke roztvára svojím obsahom). Ak je šírka elementu zadaná v percentách - pri zväčšovaní okna prehliadača sa bude zväčšovať, až kým nedosiahne hodnotu max-width.

Syntax

selektor {
	max-width: hodnota;
}

Príklad

V tomto príklade je šírka percentuálna vzhľadom na šírku rodiča. Zväčšite okno prehliadača v šírke a kontajner sa tiež zväčší, aby sa prispôsobil šírke okna prehliadača. Avšak bude sa zväčšovať len do veľkosti, určenej v max-width, to je 900px. Akonáhle kontajner dosiahne túto šírku - prestane sa zväčšovať:

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

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

Príklad

V tomto príklade je šírka kontajnera obmedzená z oboch strán: nebude sa môcť stať väčšou ako 900px a menšou ako 400px:

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

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

Pozrite tiež

vlastnosť min-width,
ktorá nastavuje minimálnu šírku elementu
vlastnosť max-height,
ktorá nastavuje maximálnu výšku elementu
vlastnosť min-height,
ktorá nastavuje minimálnu výšku elementu