Ominaisuus max-width

Ominaisuus max-width asettaa elementin enimmäisleveyden. Ominaisuuden arvona voivat olla mikä tahansa koko-yksiköt tai avainsana none, joka tarkoittaa, etteä arvoa ole asetettu.

Ominaisuus annetaan yleensä elementille, jolla on liukuva leveys (leveys on annettu prosentteina tai ei ole lainkaan annettu, ja elementin leveys mukautuu sen sisällön mukaan). Jos elementin leveys on annettu prosentteina - selaimen ikkunan leveyden kasvaessa sen leveys kasvaa, kunnes se saavuttaa max-width-ominaisuuden arvon.

Syntaksi

valitsija {
	max-width: arvo;
}

Esimerkki

Tässä esimerkissä leveys on prosenttiosuus vanhemman leveydestä. Suurenna selainikkunan leveyttä, jolloin säiliön leveyskin kasvaa mukautuakseen selainikkunan leveyteen. Se kuitenkin kasvaa vain max-width-ominaisuudessa määritettyyn arvoon saakka, joka on 900px. Kun säiliö saavuttaa tämän leveyden - se lakkaa kasvamasta:

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

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

Esimerkki

Tässä esimerkissä säiliön leveyttä rajoitetaan molemmilta puolilta: se ei voi tulla suuremmaksi kuin 900px eikä pienemmäksi kuin 400px:

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

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

Katso myös

ominaisuus min-width,
joka asettaa elementin vähimmäisleveyden
ominaisuus max-height,
joka asettaa elementin enimmäiskorkeuden
ominaisuus min-height,
joka asettaa elementin vähimmäiskorkeuden