在不使用媒体查询的情况下，在横向和纵向模式下保持图像的高度和宽度相同

Question

我有一个要求，我应该编写一个混合的android / 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

你内心的内心正在与内容一起成长。你必须用高度限制：100％：

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

同时将图像的最大高度设置为100％：

max-height: 100%;

我添加了一个简短的JavaScript来显示当标题大小发生变化时发生的事情，只需点击主页按钮：http://jsfiddle.net/gy69L77p/3/