CSS:如何使可缩放表格单元格和背景图像大小相同?

时间:2017-03-31 02:47:02

标签: html css mobile header webpage

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;}

我的问题的解决方案必须在调整窗口大小时动态工作。

我设法通过将图像设置为“背景”来使图像正确缩放。之前,它太大/太小,不适合标题。现在确实如此,但却破坏了标题的定位。

“应用程序标题”应相对于标题的剩余宽度垂直/水平居中,单元格的左边缘触及图像的右边缘。

我认为有一个简单而直接的解决方案,但我似乎无法找到它。

0 个答案:

没有答案