Как выровнять горизонтальные и вертикальные фото без искажения?

Question

[Ринат]

Ребят, подскажите примером как реализовать вот такое выравнивание

т.е горизонтальные и вертикальные фото подстраиваются под необходимый размер без искажения фото.
Благодарю !!!

Answer 1

[Froggyweb]

object-fit

https://github.com/bfred-it/object-fit-images

Answer 2

[Анатолий Жаров]

для элемента padding в процентах будет вычисляться от ширины элемента, c background-size: cover фоновое изображение будет полностью заполнять элемент

.image {
    width: 100px;
    height: 0;
    padding-top: 60%;
    background-image: url(url-to-image);
    background-size: cover;
}