Změnit velikost - Triky CSS | Almanach CSS 2025

Tyto resizekontroly vlastnictví, zda a jak může být prvek upravována uživatelem kliknutím a tažením v pravém dolním rohu prvku.

.module ( resize: both; )

Super důležité vědět: resize nedělá nic, pokud není overflowvlastnost nastavena na něco jiného než visible, což je jeho počáteční hodnota pro většinu prvků.

Také stojí za to vědět, že Firefox vám umožní změnit velikost prvku menšího, než je jeho původní velikost. Prohlížeče Webkit vám nedovolí změnit velikost prvku tak, aby byl menší, pouze větší (v obou rozměrech).

Hodnoty

none: prvek nelze měnit. Toto je počáteční hodnota pro většinu prvků. textareaElement je nejčastější výjimek v mnoha prohlížečích jeho výchozí resizehodnota both.
both: uživatel může změnit velikost výšky a / nebo šířky prvku.
horizontal: uživatel může změnit velikost prvku vodorovně (zvětšit šířku).
vertical: uživatel může změnit velikost prvku svisle (zvýšení výšky).
inherit: prvek zdědí hodnotu změny velikosti svého rodiče.

Když je možné změnit velikost prvku, má v dolním rohu malý popisovač uživatelského rozhraní. Popisovač se zobrazí vpravo na prvcích stránky, když je stránka directionnastavena na ltr(zleva doprava) a nalevo na rtl(zprava doleva) stránky.

Prvek bez rukojeti (vpředu) a s rukojetí (vzadu)

Ukázka

Změnitelným prvkem v této ukázce je odstavec. Kliknutím na tlačítka vyzkoušejte různé resizehodnoty.

Podívejte se na ukázku Pen Resize Demo od CSS-Tricks (@ css-tricks) na CodePen.

Příbuzný

overflow
direction

Více informací

Spec
Dokumenty Mozilla
Článek Davida Walsha
Triky Textarea

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.