Ridimensionare elementi con jQuery UI Resizable

Il ridimensionamento degli elementi è utile in molti contesti e può trovare spazio nelle più disparate applicazioni web, a maggior ragione se esso può essere effettuato in tempo reale, basti pensare ad una serie di contenitori che al cui interno presentano diversi elementi ma che, alcuni di essi, disposti su un'ipotetica dashboard occupano troppo spazio rispetto a quello di cui hanno effettivamente bisogno. In questo caso il loro ridimensionamento ad hoc (meglio se associato ad un seguente update delle dimensioni per mantenere costanti le modifiche anche per usi successivi) può aiutare ad ottimizzare lo spazio a disposizione.
L'obiettivo si raggiunge assegnando il metodo "resizable" ad un elemento del DOM, di conseguenza questo assumerà la capacità di essere ridimensionabile tramite trascinamento.

Il primo passo è quello di inludere le librerie jQuery e jQuery UI tra i tag head:

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js

Successivamente identificare l'elemento a cui associare la funzionalità, nel caso specifico utilizzo un'immagine (che per semplicità creo dinamicamente tramite un apposito servizio) ma potrebbe essere ad esempio anche un "div":

<img class="element" src="https://dummyimage.com/150x150/ddd/000&text=Ridimensionami" />

Ed infine associare il metodo all'elemento:

$(function() {
    $(".element").resizable({
        aspectRatio: true,
        minWidth: 50,
        maxHeight:250
    });
});

Nel codice di cui sopra ho inserito, a titolo esemplificativo, alcune opzioni aggiuntive tra cui "aspectRatio" per mantenere le proporzioni dell'elemento durante il ridimensionamento e i valori relativi alle dimensioni minime e massime che l'elemento può assumere.

Potete vedere il codice in funzione nell'esempio che ho creato su JSFiddle e che potete testare direttamente nel codice seguente all'interno del tab "Result":

Per un approfondimento sulle opzioni, metodi ed eventi utilizzabili rimando alla documentazione ufficiale del widget resizable sul sito di jQueryUI.