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;