`resize` în CSS

Permite sau interzice utilizatorului să redimensioneze un element trăgând de colțul lui (de exemplu un textarea).

Sintaxă CSS

resize: both;
resize: vertical;
resize: horizontal;
resize: none;

/* pe alte elemente decât textarea */
.panou { overflow: auto; resize: both; }

Ce face `resize`

Browserele afișează în colțul din dreapta jos al unui <textarea> un mâner de redimensionare. resize controlează pe ce axe funcționează acest mâner: ambele (both), doar pe verticală, doar pe orizontală sau deloc (none).

Proprietatea funcționează și pe alte elemente (de exemplu un <div>), dar numai dacă au overflow diferit de visible (de obicei auto sau hidden).

Limitele în care utilizatorul poate trage le dai cu min-width, max-width, min-height și max-height.

Valori uzuale

Valoare	Descriere
`both`	Redimensionare pe lățime și pe înălțime.
`vertical`	Doar pe înălțime (bun pentru formulare, nu strică layout-ul).
`horizontal`	Doar pe lățime.
`block / inline`	Variante logice: pe axa bloc sau pe axa textului.
`none`	Ascunde mânerul; elementul nu poate fi redimensionat.

Exemple

Exemplul 1: Câmp de mesaj care se mărește doar în jos

Utilizatorul poate face câmpul mai înalt, dar nu mai lat decât formularul.

.formular-contact textarea {
  width: 100%;
  min-height: 120px;
  max-height: 400px;
  resize: vertical;
}

Efect vizual în browser

Câmpul „Mesajul tău” are lățimea formularului. Trăgând de colț, Ana îl poate face mai înalt, până la 400px, dar nu mai lat.

Exemplul 2: Panou de previzualizare redimensionabil

Un div obișnuit primește mâner de redimensionare datorită combinației overflow + resize.

.previzualizare {
  width: 360px;
  height: 240px;
  min-width: 240px;
  overflow: auto;
  resize: both;
  border: 1px solid #cbd5e1;
}