Jquery 当缩放比例为'；是按背景封面自动缩放的吗？

我有一些问题：

我需要将一些文本绑定到om图像（你知道，比如redpen.io和其他服务上的标记）。文本绑定到大图像上，比如1900x1200px

然后在其他页面上，我将此图像添加到元素的背景，拉伸到所有窗口：

#backg {
    width: 100%;
    height: 100%;
    background-image: 'url-to-big-image.jpg'
    background-repeat: no-repeat;
    background-size: cover;
}

然后我遇到了麻烦：我无法将保存的标记绑定到此元素！ 首先，我将元素的原始高度和宽度划分为窗口高度和宽度：Qh和Qw。 我取mark的原始top和leftcss，然后将top*Qh和Qw*left相乘

它适用于宽度，但不适用于高度！它以某种方式被浏览器缩放，并且元素在图像上的位置不匹配

如何获得高度缩放比例来定位标记

---

提前谢谢

这么少的代码行很难帮助您

我试图通过更改以下CSS行来提供一个简单的改进：

#backg {
    background-size: 100% 100%;
    position: relative;
}

你可以戴着它玩

这就是你要找的吗

---

[更新]

您可以使用padding-top技巧来创建适合图像大小的容器

#backg {
    height: 0;
    padding-top: <image-ratio>%;
}

#backg{
身高：0；
填充顶部：%；
}

你可以戴着它玩

干杯，

---

托马斯。

尽管有“困难”的问题，但答案很简单，虽然不明显：）所有的问题都在不同的尺度之间：

首先，我们需要找到图片的“真实”高度和宽度之间的比率系数，并显示在背景中：

var imgSize = new Image();
imgSize.onload = function() {
    $('#ourdiv').css('background-image', 'url("' + imgSize.src + '")');
    h_real = this.height;
    w_real = this.width;

    q_h = h_real / $(window).height();
    q_w = w_real / $(window).width();
};
imgSize.src = 'path_to_img.jpg';

然后，将元素的“真实”位置划分为系数。但是，根据系数是否更大，我们应另分：

if (q_w > q_h)
    {
        top_d = Math.round(top_d / q_h);   
        left_d = Math.round(left_d / q_h);
    }
else
    {
        top_d = Math.round(top_d / q_w);   
        left_d = Math.round(left_d / q_w);        
    }

---

瞧所有元素都在同一个地方

谢谢你，托马斯，但这并不是我想要的：）你看，在你的例子中，图像加载时没有纵横比，但我需要保留它。但是，无论如何，非常感谢你的帮助，它给了我一些进步：）对不起我的英语不好：）也许，你可以告诉我方向，我应该从哪里开始？如果有任何提示，我将不胜感激：）新的解决方案对您有帮助吗？抱歉，反应太晚，tzi:）不幸的是，这不是我想要的，但无论如何，这是一段很棒的代码！我做了一些实验，找到了完全符合我条件的解决方案。我把它贴在这个帖子上：）非常感谢大家的关注！