CSS szélesség, magasság (width, height, max-width, max-height, min-width, min-height)
A CSS width és height tulajdonságaival egy HTML elem szélességét és magasságát adhatjuk meg. Például beállíthatjuk egy kép, egy táblázat vagy egy div szélességét és magasságát. A max-width és max-height tulajdonságokkal a maximális szélességet és magasságot, míg a min-width és min-height tulajdonságokkal a minimális szélességet és magasságot állíthatjuk be.
Milyen értékeket vehet fel a width és height?
Egye elem magasságát és szélességét az alábbi értékekkel adhatjuk meg:
- auto (ez az alapértelmezett megadási módszer, ilyenkor a böngésző számolja ki a magasságot és a szélességet)
- hosszegység (A leggyakoribb hosszegység a pixel (px), de a CSS lehetőséget biztosít egyéb hosszegység használatára is: em, cm, vw, in, ex, pt, pc)
- % (a tárolóelemhez viszonyítva százalékban is megadhatjuk a szélességet és magasságot)
- initial (az alapértelmezettre állítja a magasságot és szélességet)
- inherit (a magasság és szélesség értékét az őselemétől örökli)
Magasság szintaktikája
ELEM {
height: ÉRTÉK;
}
Code language: CSS (css)Az érték helyére adjunk meg valamilyen számot a fent taglalt módszerek segítségével, például: 500px vagy 50%. A többi módszernél nem kell számot megadnunk.
Példa magasság beállítására
CSS kód
img {
height: 200px;
}
Code language: CSS (css)Eredmény
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
A fenti kép a simán beillesztett kép, amelyre egyáltalán nem alkalmaztam módosítást, míg az alsón alkalmaztam a height: 200px; CSS kódot. Látszik, hogy nem csak a magasságát módosította, hanem a szélességét is, ilyenkor arányosítja a képet, hogy ne legyen torz. Ha nem szeretnénk, hogy ez történjen, akkor egyszerre kell alkalmaznunk a width és height tulajdonságot is.
Szélesség szintaktikája
ELEM {
width: ÉRTÉK;
}
Code language: CSS (css)Az érték helyére adjunk meg valamilyen számot a fent leírt módszerek egyikével, például: 200px vagy 20%. A többi módszernél nem kell számot megadnunk, csak a fent leírt szót.
Példa szélesség beállítására
CSS kód
img {
width: 200px;
}
Code language: CSS (css)Eredmény
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Most csak a szélességet korlátozó utasítást használtam, láthatjuk, hogy most is arányosította a képet, de ennek ellenére betartotta a szélességre tett korlátozásunkat.
Szélesség és magasság használata egyszerre
CSS kód
img {
width: 200px;
height: 200px;
}
Code language: CSS (css)Eredmény
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Láthatjuk, hogy ha mind a két utasítást egyszerre használjuk és nem vagyunk eléggé körültekintőek, akkor a fent láthatóhoz hasonló torz képet tudunk készíteni.
Max-width és max-height
A max-width és max-height tulajdonságokkal az elemek maximális szélességét és magasságát tudjuk beállítani.
Ezeket az értékeket veheti fel:
- hosszegység (px, em, cm, vw, in, ex, pt, pc)
- %
- none
- initial
- inherit
A max-width és max-height segítségével egy olyan érétéket adhatunk meg, amelynél nem szeretnék, ha magasabbra menne. Azaz például, ha beállítjuk, hogy 400 pixel legyen a szélesség, akkor automatikusan elkezdi arányosítani a magasságot is. Ha ilyenkor rárakunk egy maximum magasságot, akkor meggátolhatjuk, hogy egy adott mérettől kezdve ne változzon a magassága.
Min-width és min-height
Ezekkel a tulajdonságokkal egy elem minimális magasságát és szélességét adhatjuk. Ha a tartalom dinamikusan kisebb lenne, mint a minimálisan megszabott szélesség vagy magasság, akkor a minimálisan megszabott méret lesz alkalmazva. Természetesen, ha az elem mérete nagyobb, mint a megszabott minimális méret, akkor nem történik semmi változás, hanem az eredetileg megadott méret lesz érvényben.
Ezeket az értékeket veheti fel:
- hosszegység (px, em, cm, vw, in, ex, pt, pc)
- %
- none
- initial
- inherit
