How to fill up div width when image width is more and height when image height is more with CSS

Question

Is there a way to fill up a div's height when its containing image's height is more than its width and vice versa with only CSS without extending the image's box.

I've made a codepen to explain it better

https://codepen.io/boidu/pen/xxPYvQV

.img-container{
    height: 15rem;
    width: 15rem;
    img{
        height: 100%;
        width:100%;
        object-fit: contain;
    }
}

Answer 1

You have to give height and width separately to the img and set display flex as below for the div containing img

display: flex;
flex-direction: row;
align-items: center;
justify-content: center;