Ændre størrelse - CSS-tricks

Anonim

De resizeejendom kontroller, om og hvordan et element størrelse kan ændres af brugeren ved at klikke og trække i nederste højre hjørne af elementet.

.module ( resize: both; )

Super vigtigt at vide: resize gør intet, medmindre overflowejendommen er indstillet til noget andet end visible, hvilket er dets oprindelige værdi for de fleste elementer.

Det er også værd at vide, at Firefox giver dig mulighed for at ændre størrelsen på et element, der er mindre end dets oprindelige størrelse. Webkit-browsere giver dig ikke mulighed for at ændre størrelsen på et element for at gøre det mindre, kun større (i begge dimensioner).

Værdier

  • none: elementet kan ikke ændres. Dette er den indledende værdi for de fleste elementer. Det textareaelement er den mest almindelige undtagelse-i mange browsere dets standard resizeværdi both.
  • both: brugeren kan ændre størrelsen på elementets højde og / eller bredde.
  • horizontal: brugeren kan ændre størrelsen på elementet vandret (øge bredden).
  • vertical: brugeren kan ændre størrelsen på elementet lodret (øge højden).
  • inherit: elementet arver størrelsen på dets overordnede.

Når et element kan ændres, har det et lille UI-håndtag i et nederste hjørne. Håndtaget vises til højre på sideelementerne, når siderne directioner indstillet til ltr(venstre mod højre) og til venstre på rtl(højre til venstre) sider.

Et element uden håndtaget (foran) og med håndtaget (bagpå)

Demo

Det størrelse, der kan ændres i denne demo, er et afsnit. Klik på knapperne for at prøve de forskellige resizeværdier.

Se Pen Resize Demo af CSS-Tricks (@ css-tricks) på CodePen.

Relaterede

  • overflow
  • direction

Mere information

  • Specifikationen
  • Mozilla Docs
  • David Walshs artikel
  • Textarea tricks

Browsersupport

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
4 4 * Ingen 79 4

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 Ingen