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