Zmeniť veľkosť - Triky CSS | Almanach CSS 2025

Táto resizevlastnosť určuje, či a ako môže používateľ zmeniť veľkosť prvku kliknutím a potiahnutím za pravý dolný roh prvku.

.module ( resize: both; )

Veľmi dôležité vedieť: resize nerobí nič, pokiaľ nie je overflowvlastnosť nastavená na niečo iné ako visible, čo je počiatočná hodnota pre väčšinu prvkov.

Tiež stojí za to vedieť, že Firefox vám umožní zmeniť veľkosť prvku, ktorý je menší ako jeho pôvodná veľkosť. Prehliadače Webkit vám nedovolia zmeniť veľkosť prvku tak, aby bol menší, iba väčší (v oboch rozmeroch).

Hodnoty

none: prvok nie je možné meniť. Toto je počiatočná hodnota pre väčšinu prvkov. textareaElement je najčastejšou výnimiek v mnohých prehliadačoch jeho predvolená resizehodnota both.
both: používateľ môže zmeniť veľkosť a / alebo šírku prvku.
horizontal: používateľ môže zmeniť veľkosť prvku vodorovne (zväčšiť šírku).
vertical: používateľ môže zmeniť veľkosť prvku zvisle (zväčšiť výšku).
inherit: prvok dedí hodnotu veľkosti svojho rodiča.

Keď je možné zmeniť veľkosť prvku, má v dolnom rohu malú rukoväť používateľského rozhrania. Popisovač sa zobrazuje vpravo na prvkoch stránky, keď je stránka directionnastavená na ltr(zľava doprava), a na ľavej strane na stránky rtl(sprava doľava).

Prvok bez rukoväte (vpredu) a s rukoväťou (vzadu)

Ukážka

Zmeniteľným prvkom v tejto ukážke je odsek. Kliknutím na tlačidlá vyskúšate rôzne resizehodnoty.

Prezrite si ukážku Pen Resize Demo od CSS-Tricks (@ css-tricks) na CodePen.

Súvisiace

overflow
direction

Viac informácií

Spec
Dokumenty Mozilla
Článok Davida Walsha
Triky Textarea

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.