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标记，然后将顶部* Qh和Qw *相乘。

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

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

提前致谢！

Answer 1

很难用如此少的代码来帮助你。

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

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

您可以在this jsfiddle上播放。

这是你在找什么？

<强> [UPDATE]

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

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

您可以在this updated jsfiddle上玩它。

干杯，托马斯。

Answer 2

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

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

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's。但是，根据系数是否更大，我们应该分为另一个：

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

瞧！ - 同一地方的所有元素！

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

2 个答案: