Jquery 准确地将文本放置在具有背景大小封面的图像上

抱歉，如果这很难理解，但也很难解释

我有一个带有CSS的div：

    .gallery{
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        right:0;
            background-image:url(image.jpg);
            background-size:cover;
    }

。。。因此，图像始终覆盖所有大小的视口

我想把一些文字放在这个图层上，使其与图像保持相同的相对位置（只是相对位置，大小保持不变，只是几个字）

我可以将图像放在一个div中，然后使用百分比顶部填充来模拟图像的纵横比。但是一旦图像开始被裁剪（使用背景覆盖），纵横比就不再与原始图像相同，因此过了一段时间，文本开始覆盖不应该覆盖的部分图像

一种解决方案似乎是使用纵横比媒体查询，只需根据纵横比的变化调整百分比，但这很麻烦，感觉不太对劲

---

有什么想法或者这是不可能的？我知道图像的尺寸，所以也许我可以使用这些信息来模拟文本div上的背景封面？

一个答案可能是对文本使用SVG。 如果我正确理解了您的问题，您希望文本与图像缩放（这实际上只是一个带图像背景的div）

普通HTML文本无法缩放。但是，SVG文本将被删除

<text style="font-weight: bold;">This is text in Scalable Vector Graphic (SVG)</text>  

这是可缩放矢量图形（SVG）中的文本

---

希望这会有所帮助。

谢谢你-我的问题有点误导性，因为我不想让文本缩放，我只希望相对位置保持不变-我编辑了我的问题，让它更清晰。不过这个主意很有趣。我可以创建一个与图像尺寸相同的div，然后将文本设置为背景SVG图像，并使用背景大小封面。不过我更喜欢使用实际文本，只是尝试使用与下图相同尺寸的SVG图像，并将其背景设置为覆盖。它保持在正确的位置，但与背景图像一样，它会被裁剪为特定的纵横比。我认为肯定有一个JS解决方案，但找不到足够简单的方法