Javascript 表格或Div的高度和宽度调整为背景图像大小

我使用一个巨大的图像作为我的div的背景。这个图像只需要显示一次，即容器允许的最大大小，同时保持纵横比。图像可以有任何纵横比。容器的大小可以调整，也可以有任何纵横比。我成功地做到了这一点

background-size:contain;
background-repeat:no-repeat;
background-position: center center;
width:100%;
height:100%;
background-image: url("path/to/img");

在该图像上，我需要一个8x8表格布局，它与背景图像一起变得越来越大和越来越小

在我的JSFIDLE示例中，您有正确工作的图像尝试调整输出窗口的大小，但我不知道如何使我的表始终直接缩放到该图像上。我的想法是，字段A1将始终在特定图像上标记完全相同的点，无论大小、图像纵横比、容器纵横比

如果这个问题没有CSS/HTML选项，则可以使用jQuery/JavaScript解决方案

设置填充顶部：46%；in.Tlorisoglednarta

---

46%是图像高度*100/图像宽度

如果您愿意使用jQuery，我今天回答了另一个问题，但您可以根据我的回答轻松地将其应用到这里。这是一个例子：是的，我认为使用jQuery可以实现类似的功能。我看了那个例子，我想我可以用它来解决我的问题。我会给它几个小时，如果有人能拿出纯CSS的解决方案，然后我会继续。谢谢纯CSS解决方案似乎几乎不可能，因为您需要根据图像高度调整表高度，但事实是，在渲染图像之前，您无法知道图像的高度，因为background size:contain属性使图像不可预测。恐怕在这种情况下，您将需要Javascript或JQuery的帮助。这很接近，但有一些缺点。我的图像的纵横比不尽相同。如果我使用垂直图像，我必须将填充顶部翻转到填充左侧？如果我减小容器的高度，这个版本也不会使图像变小