Truco CSS para alinear imágenes distintas de forma sencilla sin distorsión

En muchas ocasiones nos encontramos con que tenemos que presentar de forma ordenada imágenes muy distintas entre si, por lo que queremos alinearlas horizontal y verticalmente.

¿Cuál es el problema? Que si forzamos un ancho y alto fijo las imágenes se distorsionan si son de deferente proporción.

Aquí tienes el tutorial en vídeo:

Imaginemos que tenemos las siguientes imágenes que queremos alinear:

Si las cambiamos el ancho y alto por 100px conseguimos el siguiente resultado distorsionado:

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

Pero si añadimos al CSS la propiedad object-fit:

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

El resultado será:

Créeme que este pequeño código te puede salvar de bastantes líos 😉