How to align horizontal and vertical photos without distortion?

Question

css

Guys, tell me with an example how to implement such an alignment,

i.e. horizontal and vertical photos adjust to the required size without distorting the photo.
Thanks to !!!

Answer 1

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

Answer 2

for an element, padding as a percentage will be calculated from the width of the element, c background-size: cover the background image will completely fill the element

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