html - 嵌套的 Flexbox 拉伸(stretch)图像

Question

我试图让两个嵌套的 flexboxes 在最里面有一个居中的图像，它总是适合它的容器，同时保持它的比例，而不会被拉伸(stretch)。 图像装有:

img{
    max-height: 100%;
    max-width: 100%;
}

看这里: https://jsfiddle.net/quz4zgb0/2/ .

此处宽度已适当缩放，但一旦容器变得太小，高度就会被拉伸(stretch)。我怎样才能避免这种情况？

提前致谢! 雅克

Answer 1

正在申请 object-fit: contain;和 flex-shrink: 0;到 <img>应该让你非常接近你想要的。