CSS-трюк для простого выравнивания разных изображений без искажений

Во многих случаях мы обнаруживаем, что должны представлять очень разные изображения в упорядоченном виде, поэтому мы хотим выровнять их по горизонтали и по вертикали.

В чем проблема? Что, если мы зададим фиксированную ширину и высоту, изображения будут искажены, если они будут иметь другую пропорцию.

Вот видеоурок:

Давайте представим, что у нас есть следующие изображения, которые мы хотим выровнять:

Если мы изменим ширину и высоту на 100 пикселей, мы получим следующий искаженный результат:

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

Но если мы добавим свойство object-fit в CSS:

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

Результат будет:

Поверьте, этот маленький код может уберечь вас от многих неприятностей 😉