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

cssselektor {
  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:

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

css#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:

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

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

Результат:

Viz také