Velikost - CSS-triki | Almanah CSS 2025

Za resizenadzor lastnine, če in kako se element mogoče spreminjati s strani uporabnika, tako da kliknete in povlečete spodnji desni kot elementa.

.module ( resize: both; )

Zelo pomembno je vedeti: resize ne naredi ničesar, razen če je overflowlastnost nastavljena na kaj drugega kot visible, kar je njena začetna vrednost za večino elementov.

Vredno je tudi vedeti, da vam bo Firefox omogočil, da spremenite velikost elementa, ki je manjši od njegove prvotne velikosti. Brskalniki Webkit vam ne dovolijo, da spremenite velikost elementa, da bo manjši, le večji (v obeh dimenzijah).

Vrednote

none: elementa ni mogoče spremeniti. To je začetna vrednost za večino elementov. textareaElement je najpogostejša izjema, v mnogih brskalnikih njegova privzeta resizeje vrednost both.
both: uporabnik lahko spremeni višino in / ali širino elementa.
horizontal: uporabnik lahko element spremeni vodoravno (s povečanjem širine).
vertical: uporabnik lahko element spremeni navpično (s povečanjem višine).
inherit: element podeduje vrednost spreminjanja velikosti nadrejenega elementa.

Ko je element mogoče spremeniti, ima v spodnjem kotu majhen ročaj uporabniškega vmesnika. Ročaj se prikaže na desni strani elementov strani, ko je stran directionnastavljena na ltr(od leve proti desni), in levo na rtlstraneh (od desne proti levi).

Element brez ročaja (spredaj) in z ročajem (zadaj)

Demo

Spremenljivi element v tej predstavitvi je odstavek. Kliknite gumbe, da preizkusite različne resizevrednosti.

Oglejte si predstavitev prilagajanja velikosti pisala s strani CSS-Tricks (@ css-tricks) na CodePen.

Sorodno

overflow
direction

Več informacij

Spec
Mozilla Docs
Članek Davida Walsha
Triki Textarea

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.