max-width հատկությունը

max-width հատկությունը սահմանում է տարրի առավելագույն լայնությունը: Հատկության արժեքը կարող է լինել ցանկացած չափման միավոր կամ none հիմնաբառը, որը նշանակում է արժեքի բացակայություն:

Սովորաբար հատկությունը նշվում է լողացող լայնություն ունեցող տարրի համար (լայնությունը նշված է տոկոսներով կամ ընդհանրապես նշված չէ, և տարրը լայնությամբ ընդլայնվում է իր պարունակությամբ): Եթե տարրի լայնությունը նշված է tոկոսներով, ապա դիտարկիչի պատուհանը մեծացնելիս այն կմեծանա, մինչև հասնի max-width արժեքին:

Շարահյուսություն

cssընտրիչ {
  max-width: արժեք;
}

Օրինակ

Այս օրինակում լայնությունը կազմում է տոկոս ծնողի լայնությունից: Մեծացրեք դիտարկիչի պատուհանի լայնությունը, և կոնտեյները նույնպես կմեծանա, որպեսզի հարմարվի դիտարկիչի պատուհանի լայնությանը: Սակայն այն կմեծանա միայն մինչև max-width-ում սահմանված արժեքը, որը 900px է: Հենց կոնտեյները հասնի այս լայնությանը, այն կդադարի մեծանալ:

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

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

Результат:

Օրինակ

Այս օրինակում կոնտեյների լայնությունը սահմանափակված է երկու կողմից. այն չի կարող դառնալ ավելի մեծ քան 900px և ավելի փոքր քան 400px:

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

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

Результат:

Տես նաև