Сохраняя высоту и ширину изображения же как в альбомной и портретной режиме без использования медиа запросов

Question

Я требование, где я должен написать/приложение гибрид андроид IOS, который разработан html, css, js, phonegap. Я не должен использовать свои собственные медиа-запросы. Поэтому я использую bootstrap. Я изображение в заголовке, как показано на скриншоте (это в портретном режиме):

Но при его изменении в ландшафтном режиме, изображение выходит из заголовка, как показано ниже:

Как я могу сохранить изображение в ландшафтном режиме без использования мультимедийных запросов?
Вот the code.
CSS:

#headDiv { 
    display: flex; 
    flex-flow: column; 
    justify-content: center; 
    background-color: #FFA500; 
    height: 50px; 
    padding-top: 1%; 
} 
.home { 
    margin-left: 4%; 
} 
.imgHeader { 
    display: flex; 
    flex-flow: column; 
    justify-content: center; 
    max-width: 100px; 
} 

Answer 1

Ваши внутренние DIV растут с содержанием прямо сейчас. Вы должны ограничить, что с высоты: 100%:

.home { 
    margin-left: 4%; 
    height:100%; 
} 
.row { 
    height: 100%; 
} 

Также установите максимальную-высоту изображения до 100%:

max-height: 100%; 

я, чтобы показать, Что происходит, когда размер добавлен короткий JavaScript изменений в заголовке, просто нажмите кнопку «Домой»: http://jsfiddle.net/gy69L77p/3/