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

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

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

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

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

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

Результат:

Pozrite tiež