flexbox中的图像未在浏览器调整大小时调整大小

Question

注意：我最近问了一个非常类似的问题，但由于我使用了外部URL，因为我认为JS小提琴

我有以下代码：

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%;

}