Изображения в Flexbox не изменение размера в браузере размера

Question

Примечания: Я задал очень похожий вопрос в последнее время, но был downvoted, как я использовал внешний 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%; 

}