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. Továbbá megszabhatjuk a minimális vagy maximális magasságot, szélességet.

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

kep kep

>> 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

kep kep

>> 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

kep kep

>> 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

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!