Vlastnost max-width

Vlastnost max-width nastavuje maximální šířku elementu. Jako hodnoty vlastnosti slouží jakékoli jednotky pro rozměry nebo klíčové slovo none, které znamená absenci hodnoty.

Vlastnost se obvykle nastavuje pro element s plovoucí šířkou (šířka je nastavena v procentech nebo není nastavena vůbec a element se šířkou roztahuje svým obsahem). Pokud je šířka elementu nastavena v procentech - při zvětšování okna prohlížeče se bude zvětšovat, dokud nedosáhne hodnoty max-width.

Syntaxe

selektor {
	max-width: hodnota;
}

Příklad

V tomto příkladu je šířka uvedena v procentech ze šířky rodiče. Zvětšete okno prohlížeče do šířky a kontejner se také zvětší, aby se přizpůsobil šířce okna prohlížeče. Bude se však zvětšovat pouze do velikosti stanovené v max-width, což je 900px. Jakmile kontejner dosáhne této šířky - přestane se zvětšovat:

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

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

Příklad

V tomto příkladu je šířka kontejneru omezena z obou stran: nemůže být větší než 900px a menší než 400px:

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

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

Viz také

vlastnost min-width,
která nastavuje minimální šířku elementu
vlastnost max-height,
která nastavuje maximální výšku elementu
vlastnost min-height,
která nastavuje minimální výšku elementu