Truque CSS para alinhar facilmente imagens diferentes sem distorção

Em muitas ocasiões, descobrimos que temos que apresentar imagens muito diferentes de maneira ordenada, por isso queremos alinhá-las horizontalmente e verticalmente.

Qual é o problema? Que se forçarmos uma largura e altura fixas, as imagens ficam distorcidas se forem de uma proporção diferente.

Aqui está o tutorial em vídeo:

Vamos imaginar que temos as seguintes imagens que queremos alinhar:

Se alterarmos a largura e a altura para 100px, obteremos o seguinte resultado distorcido:

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

Mas se adicionarmos a propriedade object-fit ao CSS:

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

O resultado será:

Acredite, este pequeno código pode te salvar de muitos problemas 😉