html - flexbox 中的图像不会在浏览器调整大小时调整大小

Question

注意:我最近问了一个非常相似的问题，但被否决了，因为我使用了一个外部 URL 作为 JS fiddle

我有以下代码:

HTML:

<div id="homepage-banner-contents">
    <div>
            <img src="http://s.hswstatic.com/gif/whiskers-sam.jpg" alt="logo" id="banner-logo"/>
    </div>
</div>

CSS:

    html, body {
        height: 100%;
    }

    #homepage-banner-contents {
        height: calc(100% - 60px);
        background: red;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
    }

    #banner-logo {
        max-height: 320px;
    }

    #banner-logo {
        max-height: 320px;
        max-width: 100%;
    }

https://jsfiddle.net/anik786/9vd83rww/

目标

我的目标是让图像保持在红色背景的中心，并在浏览器的高度变得太小时缩小图像。

实际发生了什么

虽然上面的代码对于正常的屏幕尺寸是没问题的；当浏览器高度降低太多时，图像似乎根本没有缩小，而是坚持保持相同的大小，导致溢出。

Answer 1

这是您要找的吗？ https://jsfiddle.net/9vd83rww/2/

#banner-logo {
    height: calc(100vh - 80px);
    max-width: 100%;

}