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

Question

我有一个要求，我应该编写一个由 html、css、js、电话间隙。我不应该使用我自己的媒体查询。所以我正在使用 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/