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

【问题标题】：Keeping the height and width of an image same in both landscape and portrait mode without using media queries在不使用媒体查询的情况下，在横向和纵向模式下保持图像的高度和宽度相同
【发布时间】：2015-08-17 07:17:57
【问题描述】：

我有一个要求，我应该编写一个由html、css、js、phonegap 开发的混合 android/iOS 应用程序。我不应该使用自己的媒体查询。所以我使用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;
}

【问题讨论】：

标签： android html css twitter-bootstrap cordova

【解决方案1】：

您的内部 div 现在随着内容的增长而增长。你必须用 height:100% 来限制它：

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

还将图像的最大高度设置为 100%：

max-height: 100%;

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

【讨论】：

我试过max-width: 100%，没用...谢谢