Átméretezés - CSS-trükkök

A resizetulajdonság szabályozza, hogy a felhasználó átméretezheti-e az elem jobb alsó sarkát kattintva és húzva.

.module ( resize: both; )

Rendkívül fontos tudni: resize nem csinál semmit, kivéve, ha a overflowtulajdonságot másra állítják be, mint visibleami a legtöbb elem kiinduló értéke.

Azt is érdemes tudni, hogy a Firefox lehetővé teszi az eredeti méreténél kisebb elem átméretezését. A Webkit böngészők nem engedik átméretezni az elemeket, hogy kisebbek, csak nagyobbak legyenek (mindkét dimenzióban).

Értékek

none: az elem nem átméretezhető. Ez a legtöbb elem kiinduló értéke. Az textareaelem a leggyakoribb kivétel - sok böngészőben az alapértelmezett resizeértéke both.
both: a felhasználó átméretezheti az elem magasságát és / vagy szélességét.
horizontal: a felhasználó vízszintesen átméretezheti az elemet (növelve a szélességet).
vertical: a felhasználó függőlegesen átméretezheti az elemet (növelve a magasságot).
inherit: az elem örökli a szülő átméretezési értékét.

Ha egy elem átméretezhető, az alsó sarokban van egy kis kezelőfelület-fogantyú. A fogantyú az oldalelemek jobb oldalán jelenik meg, ha az oldal directionbeállítása ltr(balról jobbra), és a bal oldalon a rtl(jobbról balra) oldalakon.

Elem fogantyú nélkül (elöl) és fogantyúval (hátul)

Demó

A demó átméretezhető eleme egy bekezdés. Kattintson a gombokra a különböző resizeértékek kipróbálásához .

Lásd a CSS-Tricks (@ css-tricks) által készített Pen Resize Demo bemutatót a CodePen-en.

Összefüggő

overflow
direction

Több információ

A Spec
Mozilla Docs
David Walsh cikke
Textarea trükkök

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.