Crop di immagini via css

In questo articolo vedremo molto brevemente come effettuare un finto crop di un’immagine tramite delle regole css.

Non è un vero e proprio crop perchè l’immagine viene comunque caricata intera e non vengono risparmiati byte per il caricamento dell’immagine, ma il risultato che si ottiene può essere utilizzato per visualizzare solo una parte di un’immagine più ampia dello spazio che si ha a disposizione o per mantenere organizzate tutte con le stesse dimensioni una serie di immagini disposte nella pagina.

La tecnica è semplicissima e prevede di creare un blocco (div) contenitore dell’immagine a dimensione fissa e con overflow nascosto. L’immagine a sua volta non dovrà essere più piccola dello spazio riservato per il blocco, perchè altrimenti rimarrà dello spazio bianco visibile.

Dal punto di vista del codice html è tutto molto semplice:

<div class="image-container">
    <img class="image" src="..." alt="..." />
</div>

Il codice CSS invece deve contenere le seguenti direttive:

.image-container{
   height:90px;
   width:90px;
   overflow:hidden;
}
.image{
   height:auto !important;
   height:90px;
   min-height:90px;
   width:auto !important;
   width:90px;
   min-width:90px;
   margin:0;
   padding:0;
   border:0;
}

Come si può notare il codice per la classe dell’immagine .image contiene anche un workaround per farsì che l’altezza e la larghezza minima siano rispettate su tutti i maggiori browser (internet explorer compreso).

Lascia un commento