Object-fit: ridimensionare le immagini ma mantenendo l’aspect ratio in CSS

Svariate volte mi sono chiesto come emulare il comportamento di background-size: cover; ma con un’immagine semplice e non con uno sfondo; Esistono a tal proposito vari work-around che possono venirci in soccorso ma una soluzione semplice e concisa sarebbe l’ideale.

Ecco che ci arriva in soccorso object-fit:

img {
    height: 200px;
    width: 200px;
    object-fit: cover;
}

Con queste poche linee di codice anche se avessimo un’immagine con delle proporzioni diverse, l’aspetto verrà mantenuto ma l’immagine verrà automaticamente tagliata e riempirà le dimensioni che gli abbiamo assegnato, esattamente come succede negli sfondi assegnando la proprietà background-size: cover.

A object-fit è possibile assegnare anche altri valori oltre a cover tra cui contain (che mostra tutta l’immagine con le proporzioni esatte) e fill (che al contrario stretcha l’immagine fino a riempire totalmente le dimensioni che abbiamo assegnato).

Il supporto di object-fit non è però eccezionale:
Chrome e Opera lo supportano ormai da tempo, firefox dalla versione 36, Android Browser solo dalla versione 4.4.4 ed IOS Safari lo supporta parzialmente dalla versione 7.1 in poi.

Ovviamente Internet Explorer non ci delude mai (ironico) non avendo nessun tipo di support nemmeno nella versione 11.

Matteo Currò

Autore: Mi chiamo , ho 29 anni e lavoro come freelance Web designer e Front-end developer aiutando startups e aziende a migliorare o a rivoluzionare la loro immagine nel web.