CSS 如何在图像宽度更大时填充 div 宽度，当图像高度更大时如何填充高度

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;