Un brutto difetto delle immagini nell’HTML è sicuramente la gestione delle dimensioni dell’immagine.
Mi spiego meglio: se state lavorando su un sito e avete a che fare con i tag img, avrete sicuramente notato che non potete “ritagliare” un’immagine per adattarla alle dimensioni del contenitori.
Se per esempio avete la necessità che il vostro contenitore dell’immagine debba essere di dimensioni 150px x 150px, e nell’impostare l’immagine vogliate mantenere le proporzioni di essa, non avete nessun metodo che vi permetta di “ritagliare” l’immagine in modo che si crei una sorta di “thumbnail”.

Ad esempio, citando il sistema che usa Facebook, voi avete l’immagine del profilo, che può anche non essere quadrata.
Mentre nelle Notizie, ogni miniatura risulta essere quadrata, con il conseguente risultato che l’immagine sarà tagliata, e non ridimensionata! (oppure a chi è familiare stretchata).
Per fare ciò, Facebook permette a voi stessi di “ritagliarvi” la vostra miniatura.

La mia soluzione personale è invece basata sull’uso del background-size introdotto con i CSS3, che pero’ ha ancora una piccola pecca, non riesce a determinare automaticamente quale tra larghezza ed altezza sia il maggiore, e quindi nel contenitore capita che ci sia una parte di esso dove l’immagine non è presente.

La soluzione più semplice è quella di impostare l’attributo cover alla proprietà background-size: background-size: cover, e potete fare tutto in una sola riga di CSS

Se invece volete sviluppare soluzioni cross-browser, e capire come funziona il cover del CSS, continuate nella lettura dell’articolo.

Facciamo qualche esempio, per capire meglio come funziona lo script.
Abbiamo la nostra generica immagine, ad esempio, userò la seguente:

Essa ha dimensioni reali di 720x428px.

Ora, ammettiamo che voi abbiate la necessità che la vostra miniatura debba essere di 150x150px.
Se provate ad impostare larghezza ed altezza fisse, il risultato sarà ovviamente l’immagine stretchata a 150px, così:

Se invece volete mantenere le proporzioni dell’immagine, potete settare solamente uno tra larghezza o altezza: l’altra scelta verrà automaticamente impostata su auto.
Quindi:

Quindi ancora non va bene, perchè l’altezza non è di 150px come volevamo!

Riuscite a capire da soli quindi che l’immagine vada ritagliata. Esistono molti altri script realizzati in PHP o linguaggi lato server che “realizzano” la miniatura, ma a mio avviso la mia soluzione utilizza solo CSS e Javascript, quindi risulta essere più performante in quanto agisce a livello client.

Ovviamente questa volta non possiamo usare l’attributo src del tag immagine, ma ci rifaremo al CSS.
Possiamo usare qualsiasi elemento del DOM, ad esempio un div.
Per impostare l’immagine, useremo la regola background-image, in questo modo:
<div style="background-image: url(myimage.png)"></div>

Abbiamo a disposizione la proprietà background-size, introdotta con il CSS3, che permette di impostare la dimensione dello sfondo, in larghezza ed in altezza.

Ad esempio, con la regola CSS background-size: 100% 100% otteniamo uno stretch dell’immagine, cioè diciamo al browser di impostare la larghezza/altezza massima rispetto al contenitore padre, e non ci va bene, infatti otterremmo lo stesso risultato del primo esempio.

Nel nostro caso, quello che ci risulta utile è la seguente regola: background-size: 100% auto, unito ad background-position:center;background-repeat:no-repeat;. In questo modo diciamo al browser: impostami la larghezza dello sfondo in modo che sia massima rispetto al contenitore padre, mentre l’altezza gestitscila proporzionalmente, quindi centrala all’interno del contenitore.
Otterremmo questo:

Sbaglio o c’è qualcosa che non va? Già, perchè abbiamo impostato la regola background-size: 100% auto, e quindi il browser fa in modo da aver nel contenitore tutta l’immagine in larghezza.

Quindi voi ora mi direte, ma certo, basta invertire la regola, in questo modo: background-size: auto 100%, e otterremmo l’effetto desiderato, ovvero il ritaglio dell’immagine dai bordi:

Giusto? Sbagliato!.
In questo modo il codice funzionerà solo per le immagini che si estendono maggiormente in larghezza.. mentre per quelle che si sviluppano maggiormente in altezza, avremo sempre i bordi bianchi al di fuori dell’immagine.

Quindi la soluzione deve prevededere un controllo sulle dimensioni dell’immagine, e in Javascript è possibile farlo egregiamente, avendo anche un preload dell’immagine stessa!

Per questo motivo ho realizzato la funzione che potrete usare comodamente.
La funzione ha in ingresso due parametri, il primo è l’elemento del DOM (prelevato con jQuery, $$, getElementById, ecc…), il secondo è il percorso dell’immagine da inserire.

Per utilizzarla nel vostro sito, posto qui un esempio in jQuery:

A presto!

Un ringraziamento al sig. Francesco Zaccaria per la disponibilità facciale.

Se hai letto questo articolo, potrebbero interessarti anche:

• Sapere chi dei tuoi amici di Facebok è online, anche quando sei offline!
• Bookmark per redirect su Graph API di un utente Facebook
• Ombra interna nel testo con CSS3
• Le migliori innovazioni del CSS3
• Utilizzare i selettori CSS in Javascript con il dollaro-dollaro