Redimensionare - CSS-Tricks

Anonim

De resizeControalele de proprietate în cazul în care și modul în care un element poate fi redimensionate de către utilizator făcând clic și trăgând colțul din dreapta jos al elementului.

.module ( resize: both; )

Foarte important de știut: resize nu face nimic decât dacă overflowproprietatea este setată la altceva decât visible, care este valoarea sa inițială pentru majoritatea elementelor.

De asemenea, merită să știți că Firefox vă va permite să redimensionați un element mai mic decât dimensiunea sa originală. Browserele Webkit nu vă permit să redimensionați un element pentru al face mai mic, ci doar mai mare (în ambele dimensiuni).

Valori

  • none: elementul nu este redimensionabil. Aceasta este valoarea inițială pentru majoritatea elementelor. textareaElementul este cel mai frecvent excepție în multe browsere implicită resizevaloare nu este both.
  • both: utilizatorul poate redimensiona înălțimea și / sau lățimea elementului.
  • horizontal: utilizatorul poate redimensiona elementul pe orizontală (mărind lățimea).
  • vertical: utilizatorul poate redimensiona elementul pe verticală (crescând înălțimea).
  • inherit: elementul moștenește valoarea de redimensionare a părintelui său.

Când un element este redimensionabil, acesta are un mic mâner UI într-un colț inferior. Mânerul apare în dreapta pe elementele paginii atunci când pagina directioneste setată la ltr(de la stânga la dreapta) și la stânga pe rtlpaginile (de la dreapta la stânga).

Un element fără mâner (față) și cu mâner (spate)

Demo

Elementul redimensionabil din această demonstrație este un paragraf. Faceți clic pe butoane pentru a încerca diferitele resizevalori.

Vedeți Demo-ul de redimensionare stilou de CSS-Tricks (@ css-tricks) pe CodePen.

Legate de

  • overflow
  • direction

Mai multe informatii

  • Spec
  • Documente Mozilla
  • Articolul lui David Walsh
  • Trucuri Textarea

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom Firefox IE Margine Safari
4 4 * Nu 79 4

Mobil / Tabletă

Android Chrome Android Firefox Android Safari iOS
88 85 81 Nu