In questo articolo vedremo come manipolare le dimensioni di un’immagine utilizzando i CSS. Grazie ad un po’ di markup HTML e ad un uso sapiente dei fogli di stile, infatti, è possibile effettuare operazioni di resize (ridimensionamento) e di crop (ritaglio) di un’immagine.
Al fine di sviluppare il nostro articolo e di implementare gli esempi pratici faremo riferimento a questa immagine:
La nostra immagine è larga 650 pixel ed alta 300 pixel. Vediamo ora come maipolarne le dimensioni coi CSS.
Ridimensionare un’immagine
La prima operazione (il resize) è decisamente semplice. Supponiamo di avere un’immagine larga 800 pixel e di volerla usare all’interno di uno spazio largo appena 200 pixel. La soluzione più performante, sicuramente, sarebbe quella di creare una miniatura dell’immagine (manualmente o attraverso un qualche componente server-side) ma, non potendo operare in questo modo, i CSS offrono una pratica soluzione. In sostanza viene definita in modo esplicito la nuova larghezza dell’immagine (attraverso la proprietà width) mentre l’altezza (height) viene settata su auto. Vediamo il codice:
img.resized { width: 200px; height: auto; }Tornando alla nostra immagine di esempio, il risultato di un simile markup sarebbe il seguente:
Ovviamente avremmo potuto fare la cosa opposta qualora a dover essere ridimensionata fosse l’altezza e non la larghezza:
img.resized { width: auto; height: 200px; }Il risultato di questo codice è il seguente:
Si noti che il valore auto ha la funzione di mantenere invariate le proporzioni dell’immagine anche se non se ne conoscono a priori le dimensioni esatte.
Qualora l’immagine fosse inserita all’interno di un box che si desidera riempire, sarebbe possibile settarne le dimensioni anche utilizzando le percentuali:
div.box { width: 300px; }
.box > img { width: 100%; height: auto; }Con questo codice l’immagine andrebbe a "riempire" la larghezza del suo contenitore (in questo caso assumerebbe, in pratica, una larghezza di 300 pixel).
Ritagliare un immagine (utilizzando una cornice)
Decisamente più complessa l’operazione di crop. Mentre per il resize, infatti, è sufficiente applicare uno stile o una classe all’immagine da ridimensionare, per il crop è necessario aggiungere un contenitore HTML da utilizzare come "taglierina". Il nostro markup HTML, pertanto, sarà qualcosa del genere:
<div class="cropper">
<img src="foto.jpg"/>
</div>Per operare il ritaglio è necessario intervenire sullo stile del box contenitore (la nostra "taglierina"). In pratica andremo ad impostare le dimensioni desiderate per il ritaglio (che devono essere necessariamente inferiori a quelle dell’immagine originale) e dovremo settare come hidden il valore della proprietà overflow. Vediamo un esempio:
div.cropper {
width: 300px;
height: 200px;
overflow: hidden;
}Questo il risultato del codice d’esempio:
Come potete notare il ritaglio ha riguardato la parte in alto a sinistra della nostra immagine.
Grazie ad un altro po’ di CSS, tuttavia, possiamo decidere di posizionare diversamente l’immagine. Ad esempio possiamo ritagliare la nostra immagine selezionandone la parte centrale. Per farlo dovremo applicare un po di stile CSS anche al tag IMG e fare un po’ di conti sulla base delle dimensioni dell’immagine originale e di quelle attese all’atto del crop. Applichiamo quindi la classe "centrato" alla nostra immagine:
<div class="cropper">
<img src="foto.jpg" class="centrato"/>
</div>ed andiamo a definirne il contenuto all’interno del nostro foglio di stile:
cropper > img {
margin: -50px 0 0 -175px;
}Per effettuare il centramento non facciamo altro che settare dei margini negativi alla nostra immagine in modo da spostarla secondo le nostre esigenze. Ma come abbiamo ottenuto i valori per la proprietà margin? semplicemente facendo un paio di sottrazioni:
- margine superiore = (altezza originale – altezza ritaglio) / 2
- margine sinistro = (larghezza originale – larghezza ritaglio) / 2
Questo il risultato del nostro ritaglio centrato:
Ridimensionare e ritagliare un’immagine coi CSS
E’ anche possibile effettuare le due operazioni simultaneamente. Supponiamo di voler creare, tramite i CSS, una miniatura quadrata della nostra immagine di 150 x 150 pixel. Per farlo, però, non vogliamo "catturare" una porzione dell’immagine alle dimensioni orginali ma, prima di tutto, operare un ridimensionamento della stessa agendo sul lato minore (nel nostro caso l’altezza).
Questo il codice CSS:
.thumb {
width: 150px;
height: 150px;
overflow: hidden;
}
.thumb > img {
height: 150px;
width: 325px;
margin-left: -77px;
}Questo il codice HTML:
<div class="thumb">
<img src="foto.jpg"/>
</div>Vediamo il risultato:
Circa la definizione della cornice non c’è molto da aggiungere rispetto a quanto esposto in occasione della descrizione della tecnica di crop coi CSS.
Alcune osservazioni, invece, sono necessarie riguardo allo stile applicato all’immagine: qui abbiamo impostato l’altezza a 150 pixel (in modo da adattarla esattamente alla dimensione della cornice) e la larghezza in modo proporzionale in modo da non alterare l’immagine sulla base di una semplice formulina matematica:
larghezza originale / (altezza originale / altezza miniatura)Come detto abbiamo deciso di operare sull’altezza in quanto si tratta del lato minore della nostra immagine.
Come nel caso del crop, inoltre, abbiamo applicato dei margini negativi questa volta operando solo sul margine sinistro in quanto l’altezza dell’immagine era già stata adeguata a quella del contenitore.
Come avrete notato, per effettuare il cropping di un’immagine coi CSS utilizzando la tecnica esposta qui sopra è necessario conoscere le dimensioni dell’immagine originale che si desidera tagliare. Ma se queste non sono disponibili? Se l’immagine, ad esempio, viene caricata dagli utenti tramite un form e questa non deve avere dimensioni prestabilite?
Ridimensionare e ritagliare un immagine (utilizzando la proprietà background)
La soluzione a quest’ultimo problema prevede l’utilizzo di una tecnica totalmente differente dalla precedente basata sull’utilizzo delle proprietà della famiglia background. In pratica si imposta un contenitore delle dimensioni volute ed a quest’ultimo si assegna l’immagine da tagliare come background. Facendo in questo modo diventa molto semplice, ad esempio, selezionare l’area centrale dell’immagine pur non conoscendone le dimensioni.
Vediamo ora come utilizzare questa nuova tecnica per creare, come nell’esempio precedente, una miniatura quadrata di 150 x 150 pixel avendo cura di selezionare la porzione centrale dell’immagine. Questo il codice CSS:
.thumb {
width: 150px;
height: 150px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}e questo il codice HTML:
<div class="thumb"
style="background-image: url('ferrari.jpg');">
</div>Questo il risultato:
Come potete notare, utilizzando questa tecnica, l’operazione diventa molto semplice in quanto le proprietà background-* fanno tutto in automatico senza dover fare calcoli di alcun tipo:
- grazie alla proprietà background-position (il cui valore è "center center") lo sfondo viene centrato sia sull’asse orizzontale che su quello verticale;
- mediante la proprietà background-repeat (il cui valore è "no-repeat") evitiamo che il background venga ripetuto più volte;
- mediante la proprietà background-size (il cui valore è "cover") facciamo in modo che lo sfondo "riempia" nel miglior modo possibile lo spazio a sua disposizione (in questo modo il resize dell’immagine per il lato minore è automatico).
Il rovescio della medaglia è che, da un punto di vista del markup, non abbiamo un’immagine nella pagina ma solo un DIV con uno sfondo il che, da un punto di vista SEO, potrebbe non essere una soluzione brillante (ma questo è un’altro discorso che esula totalmente dal nostro ambito).
Conclusioni
Queste tecniche hanno il vantaggio di essere semplici da attuare, tuttavia prima di farvi ricorso è bene effettuare alcune valutazioni. E’ bene ricordare, infatti, che utilizzando i CSS per effettuare operazioni di resize e crop sulle immagini, queste vengono caricate integralmente nel browser con conseguente maggior consumo di banda e possibile rallentamento nel caricamento della pagina web. La creazione di miniature utilizzando script lato server, quindi, ha il vantaggio di accellerare (anche notevolmente) i tempi di caricamento della pagina e di ridurre il consumo di banda.
La scelta tra le diverse strade percorribili, quindi, dipende dalle effettive esigenze di produzione e dalle specifiche caratteristiche del caso d’uso.
