Endre størrelse - CSS-triks

Anonim

De resizeeiendoms kontrollerer om hvordan et element kan bli endret av brukeren ved å klikke og dra nederst i høyre hjørne av elementet.

.module ( resize: both; )

Super viktig å vite: resize gjør ingenting med mindre overfloweiendommen er satt til noe annet enn visible, som er den opprinnelige verdien for de fleste elementer.

Det er også verdt å vite at Firefox lar deg endre størrelse på et element som er mindre enn den opprinnelige størrelsen. Webkit-nettlesere lar deg ikke endre størrelse på et element for å gjøre det mindre, bare større (i begge dimensjoner).

Verdier

  • none: elementet kan ikke endres. Dette er den opprinnelige verdien for de fleste elementene. The textareaelement er den vanligste unntaks i mange nettlesere resizestandardverdien er both.
  • both: brukeren kan endre størrelsen på elementets høyde og / eller bredde.
  • horizontal: brukeren kan endre størrelsen på elementet horisontalt (øke bredden).
  • vertical: brukeren kan endre størrelsen på elementet vertikalt (øke høyden).
  • inherit: elementet arver størrelsesverdien til foreldrene.

Når et element kan endres, har det et lite brukergrensesnitthåndtak i nedre hjørne. Håndtaket vises til høyre på sideelementene når siden directioner satt til ltr(fra venstre til høyre), og til venstre på rtl(fra høyre til venstre) sider.

Et element uten håndtaket (foran) og med håndtaket (bak)

Demo

Det store elementet i denne demoen er et avsnitt. Klikk på knappene for å prøve de forskjellige resizeverdiene.

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

I slekt

  • overflow
  • direction

Mer informasjon

  • Spesifikasjonen
  • Mozilla Docs
  • David Walshs artikkel
  • Textarea Triks

Nettleserstøtte

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
4 4 * Nei 79 4

Mobil / nettbrett

Android Chrome Android Firefox Android iOS Safari
88 85 81 Nei