Muuta suurust - CSS-trikid | CSS-i almanahh 2025

resizeVara kontrolli, kas ja kuidas element saab muuta kasutaja poolt klõpsates ja lohistades all paremas nurgas element.

.module ( resize: both; )

Väga oluline teada: resize ei tee midagi, kui overflowatribuudiks pole seatud midagi muud kui see visible, mis on enamiku elementide jaoks selle algväärtus.

Samuti tasub teada, et Firefox võimaldab teil muuta algsest mõõtmetest väiksema elemendi suurust. Veebikomplekti brauserid ei luba teil elemendi suurust muuta, et see oleks väiksem, vaid suurem (mõlemas mõõtmes).

Väärtused

none: elemendi suurust ei saa muuta. See on enamiku elementide algväärtus. textareaElement on kõige levinum arvatud-paljudes brauserites vaikimisi resizeväärtus on both.
both: kasutaja saab muuta elemendi kõrguse ja / või laiuse suurust.
horizontal: kasutaja saab muuta elemendi suurust horisontaalselt (laiust suurendades).
vertical: kasutaja saab muuta elemendi suurust vertikaalselt (kõrguse suurendamine).
inherit: element pärib oma vanema suuruse muutmise väärtuse.

Kui elemendi suurust saab muuta, on selle alumises nurgas väike kasutajaliidese käepide. Käepide kuvatakse lehelementide paremal küljel, kui lehe väärtuseks directionon seatud ltr(vasakult paremale), ja vasakul lehel rtl(paremalt vasakule).

Käepidemeta (ees) ja käepidemega (tagumine) element

Demo

Selle demo muudetav element on lõik. Erinevate resizeväärtuste proovimiseks klõpsake nuppe .

Vaadake CodeSeni lehel CSS-Tricks'i pliiatsi suuruse muutmise demo (@ css-tricks).

Seotud

overflow
direction

Rohkem informatsiooni

Spetsifikatsioon
Mozilla dokumendid
David Walshi artikkel
Textarea trikid

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.