Trucco CSS per allineare facilmente immagini diverse senza distorsioni

In molte occasioni scopriamo che dobbiamo presentare immagini molto diverse in modo ordinato, quindi vogliamo allinearle orizzontalmente e verticalmente.

Qual è il problema? Che se forziamo una larghezza e un'altezza fisse, le immagini vengono distorte se hanno una proporzione diversa.

Ecco il video tutorial:

Immaginiamo di avere le seguenti immagini che vogliamo allineare:

Se cambiamo la larghezza e l'altezza a 100px otteniamo il seguente risultato distorto:

img {
    height: 100px;
    width: 100px;
}

Ma se aggiungiamo la proprietà object-fit al CSS:

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

Il risultato sarà:

Credimi, questo piccolo codice può salvarti da molti problemi 😉