https://jsfiddle.net/ug4u48pr/3/
我正在尝试构建一个简单的应用程序来放置一个网页,以便移动设备访问。
由于移动设备往往具有各种分辨率,我想我会尝试使页眉/页脚部分尽可能保持一致,使其高度为20%,身高部分高度为60%
问题在于我似乎无法在标题相对高度的约束范围内拟合图像。
我环顾四周,并因各种各样的事情失败了......
img {max-height: 100%; max-width: 100%;}
img {display: block; overflow: visible/hidden;}
img {width: 100%; height: auto;}
img {height: 70px;}
我的问题的解决方案必须在调整窗口大小时动态工作。
我设法通过将图像设置为“背景”来使图像正确缩放。之前,它太大/太小,不适合标题。现在确实如此,但却破坏了标题的定位。
“应用程序标题”应相对于标题的剩余宽度垂直/水平居中,单元格的左边缘触及图像的右边缘。
我认为有一个简单而直接的解决方案,但我似乎无法找到它。