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

Question

有没有一种方法可以在包含图像的高度大于其宽度时填充 div 的高度，反之亦然，只有 CSS 而不扩展图像的框。

我做了一个代码笔来更好地解释它

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

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

Answer 1

您必须分别为 img 提供高度和宽度，并为包含 img 的 div 设置 display flex

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