Facebook API在背景位置属性中覆盖图像偏移

！！！如果现在有人能回答这个问题，我将等待悬赏期结束，并在奖励前将其增加到150。（童子军荣誉！）

我环顾四周，但找不到这个问题的答案：

我从FBAPI获取事件封面图像，并存储偏移量x和偏移量y值。然后我将图像放置为css背景图像，如下所示：

CSS

  .event-image {
    margin-bottom: 30px;
    width: auto;
    width: 500px;
    height: 178px;
    max-width: 100%;
    min-width: 300px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    outline: none;
  }

高度/宽度基于facebook使用的精确比率：2,8:1

HTML

<div class="event-image" style="background-image: url([url of img]);  background-position: [offset_x]% [offset_y]%;" >

---

我见过这种方法被用于与FB的偏移

FB.api(artist, function (data) {
    $('.ed-cover img').attr('src', data.cover.source)
    .css("top", (-1 * data.cover.offset_y) + '%');
});

---

解释有问题

fb api中的值

50

显然是指在

top

中使用时的偏移百分比，即包含块高度的百分比（）。这与在

背景位置使用时不同。还有一种方法可以直观地显示差异

如果要使用
背景位置
，解决方案是使用
px
。
或者，您可以使用
top
，作为
%
或
px

我编写了以下代码来比较您的代码、fb代码和修复程序（对于所有备选方案）：


/*您的原始代码*/
.活动图像{
宽度：500px；
高度：178px；
背景尺寸：封面；
背景图像：url（“https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg");
背景位置：0 50%；/*“50”来自fb api，但未正确使用*/
}
/*FB实际代码*/
.掩护{
宽度：826px；
高度：294px；
位置：相对位置；
溢出：隐藏；
}
.掩护img{
位置：绝对位置；
宽度：100%；
左：0；
顶部：-147px；/*294px*50%=147px，这是FBAPI中“50”的正确用法*/
}
/*你的代码，如果显示一样大的FB图像*/
.更大的形象{
宽度：826px；
高度：294px；
背景尺寸：封面；
背景图像：url（“https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg");
背景位置：0 50%；/*“50”来自fb api，但未正确使用*/
}
/*使用“背景位置”的正确代码*/
.正确的图像{
宽度：500px；
高度：178px；
背景尺寸：封面；
背景图像：url（“https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg");
背景位置：0-89px；/*178px*50%=89px，这是FBAPI中“50”的正确用法*/
}
/*在pct中使用“top”的正确代码*/
.正确的封面{
宽度：500px；
高度：178px；
位置：相对位置；
溢出：隐藏；
}
.正确的盖img.pct{
位置：绝对位置；
宽度：100%；
左：0；
top:-50%；/*fb api中“50”的正确用法*/
}
/*在px中使用“top”的正确代码*/
.正确的盖img.px{
位置：绝对位置；
宽度：100%；
左：0；
顶部：-89px；/*178px*50%=89px，这是FBAPI中“50”的正确用法*/
}
您的原始代码


FB实际代码


你的代码，如果显示一样大的FB图像


使用“背景位置”的正确代码


在pct中使用“top”的正确代码


在px中使用“top”的正确代码

谢谢你的建议，但是这个答案是从我的建议中提取出来的，正如我已经说过的，对我来说不适用。谢谢！这绝对是正确的答案：-）-我会让奖金到期，然后最多150美元，并尽快奖励给你。感谢奖金：）作为奖励，我更新了我的答案，补充了关于46%的解释。我在实施此解决方案时遇到了一些问题，你能解释一下我错在哪里吗？我将用新的问题编辑我的问题。刚才，我以为我已经得到了导致7px的计算结果（对于第二种情况），但当我再次验证它时，不知何故它不起作用。奇怪的是，来自FBAPI的URL的图像大小是720x266px，而在实际的FB页面上是800x296px。实际的fb事件页面在图像右侧也有一个7px的间隙（请参见白色到灰色的渐变条），因为它向左移动了
：-7px
。你第三个案例的1800也很奇怪，你能告诉我结果吗？我会继续研究这一点，稍后再让你知道。是的，这让人困惑，而困惑来自fb文档与实际api响应。这是1800 json:-）
{“封面”：{“offset_x”：1800，“offset_y”：0，“source”：https://scontent.xx.fbcdn.net/v/t1.0-9/s720x720/14925720_1675594702754596_8307502062667602009_n.png?oh=cceecb108e342889c4a1bc2a6df57469&oe=58CB1BB0“，“id”：“1675594702754596”}，“id”：“112418834362717”}