Html CSS：如何使可缩放的表格单元格和背景图像大小相同？

我正在尝试构建一个简单的应用程序，将其放在网页上，以便移动设备访问

因为移动设备往往有多种分辨率，我想我应该尽量使页眉/页脚部分保持一致，使它们的高度为20%，而正文部分的高度为60%

问题是，我似乎无法在标题相对高度的约束范围内拟合图像

我环顾四周，发现有很多事情都失败了，比如

img {max-height: 100%; max-width: 100%;}
img {display: block; overflow: visible/hidden;}
img {width: 100%; height: auto;}
img {height: 70px;}

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

我通过将图像设置为“背景”，成功地将其适当缩放。以前，它太大/太小，不适合头部。现在确实如此，但破坏了标题的定位

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

---

我想有一个简单直接的解决方案，但我似乎找不到。

我会删除所有图像元素，并使用背景属性处理图像。首先你需要背景图像属性，还有几个其他属性你可以在这个网站上浏览：除了上面的评论，通常你要避免在移动网络浏览器上使用图像，因为图像会吞噬人们的数据。如果您在媒体查询中设置背景图像代码（css内容仅适用于您指定的屏幕大小），此方法对移动非常友好。感谢您提供有关使用“背景”属性的提示。我已经更新了JSFIDLE并使其保留在标题中，但我不知道如何折叠单元格以适应背景图像。至于图像+网络浏览器+移动数据。。。我不太担心，因为我将要使用的实际图像很小（<200x200）。据我所知，通过背景保存图像的元素不是根据图像进行缩放，而是相反。通过使用某些背景属性（我认为背景大小是特定的），可以改变图像缩放到元素大小的方式。还有一个使图像平铺的背景重复属性。试着看看这个问题的答案：