当背景覆盖自动缩放时，如何获得比例图像？

Question

我有一些问题：

我需要将一些文本绑定到位置 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。我采用标记的原始顶部和左侧css，然后乘以 top*Qh 和 Qw*left。

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

如何获得高度缩放比例以定位我的标记？

提前致谢！

Answer 1

尽管存在“困难”问题，但答案非常简单，尽管并不明显:) 尺度之间的所有问题：

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

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

然后，将元素的“真实”位置除以 coef 的位置。然而，根据系数是否更大，我们应该除以另一个：

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

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