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

Posted 2023-05-08

【中文标题】Facebook API 覆盖背景位置属性中的图像偏移

【英文标题】：Facebook API cover images offsets in background-position attributes

【发布时间】：2017-03-23 04:03:45

【问题描述】：

！！！如果有人现在可以回答这个问题，我会等待赏金期结束，直到达到 150 再奖励。 （童子军荣誉！）！！！

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

我从 fb api 获取事件封面图像，并存储 offset_x 和 offset_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 api 中有一个设置，则只添加 background-position 属性。）

问题是这只在 90% 的情况下有效。大约 10% 的图像略微未对齐。通常只有几个百分点:-(

这是一个例子。

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

<div class="event-image" style="background-image: url(https://scontent.xx.fbcdn.net/t31.0-0/p180x540/14566476_1295215523823549_1334771895810946224_o.jpg);  background-position: 0% 50%; ">	</div>
<!-- Offsets are taken directly from API -->

现在是actual event

您可以看到实际上偏移量在 46% 时是完美的 - 那么为什么 fb 给出 50%？

我能找到的最多信息是pixel calculations，但考虑到我使用的是百分比，这没什么用。

编辑

实现elfan解决方案的新问题：

Here is an event 在 fb 上，其中图像在 -7px 的实际 fb 页面中有 offset_x - 但根据 api，offset_x = 50%

  "cover": 
    "offset_x": 50,
    "offset_y": 0,
    "source": "https://scontent.xx.fbcdn.net/t31.0-8/s720x720/14681104_1307094859330152_7540791723420117074_o.jpg",
    "id": "1307094859330152"
  ,
  "id": "544220282434185"

所以，使用计算500px (width of my image) * offset_x % = 250px

我做错了什么:-)

我还注意到有些事件具有疯狂的偏移量，例如 1800。根据 fb docs，它应该在 0-100 之间。

【参考方案1】：

解释有问题。

来自 fb api 的值50 显然是指在top 中使用它时以百分比表示的偏移量，这意味着包含块高度的百分比（spec here）。这与在background-position (spec here) 中使用它时不同。还有an article here，直观地显示了差异。

如果要使用background-position，解决方案是使用px。 或者，您可以使用top，作为% 或px。

我制作了以下代码来比较您的代码、fb 代码以及修复的内容（适用于所有替代方案）：

/* Your original code */
.event-image 
	width: 500px;
	height: 178px;
	background-size: cover;
	background-image: url("https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg");
	background-position: 0 50%;  /* "50" is from fb api, but not used correctly */


/* FB actual code */
.cover 
	width: 826px;
	height: 294px;
	position: relative;
	overflow: hidden;

.cover img 
	position: absolute;
	width: 100%;
	left: 0;
	top: -147px;  /* 294px * 50% = 147px, this is the correct usage of "50" from fb api */


/* Your code if showing as big as FB image */
.bigger-image 
	width: 826px;
	height: 294px;
	background-size: cover;
	background-image: url("https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg");
	background-position: 0 50%; /* "50" is from fb api, but not used correctly */


/* The correct code using "background-position" */
.correct-image 
	width: 500px;
	height: 178px;
	background-size: cover;
	background-image: url("https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg");
	background-position: 0 -89px;   /* 178px * 50% = 89px, this is the correct usage of "50" from fb api */


/* The correct code using "top" in pct */
.correct-cover 
	width: 500px;
	height: 178px;
	position: relative;
	overflow: hidden;

.correct-cover img.pct 
	position: absolute;
	width: 100%;
	left: 0;
	top: -50%;    /* the correct usage of "50" from fb api */


/* The correct code using "top" in px */
.correct-cover img.px 
	position: absolute;
	width: 100%;
	left: 0;
	top: -89px;  /* 178px * 50% = 89px, this is the correct usage of "50" from fb api */

<h3>Your original code</h3>
<div class="event-image"></div>
<br />

<h3>FB actual code</h3>
<div class="cover">
	<img src="https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg" />
</div>
<br />

<h3>Your code if showing as big as FB image</h3>
<div class="bigger-image"></div>
<br />

<h3>The correct code using "background-position"</h3>
<div class="correct-image"></div>
<br />

<h3>The correct code using "top" in pct</h3>
<div class="correct-cover">
	<img class="pct" src="https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg" />
</div>
<br />

<h3>The correct code using "top" in px</h3>
<div class="correct-cover">
	<img class="px" src="https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg" />
</div>
<br />

关于为什么 46% 在您的原始代码中看起来正确的附加说明：

background-position: 0% 与top: 0px 相同

background-position: 100% 与top: -197px 相同

background-position: 50% 与top: -98.5px 相同（197 x 50%）

background-position: 46% 与top: -90.62px 相同（197 x 46%），而正确的是top: -89px，因此看起来足够接近。

197 来自哪里？ 框大小为 500 x 178 像素。实际图像尺寸为 800 x 600 像素。由于background-size: cover 而渲染/缩放的图像大小为 500 x 375px。 图像高度比盒子高度大 375-178 = 197px。请记住，在使用background-position: 100% 时，图像的底边会与框的底边相交，即top: -197px。

【讨论】：

谢谢！这绝对是正确的答案:-) - 我会让赏金到期，然后将其提高到 150 并尽快奖励给你。

感谢您的赏金 :) 作为奖励，我更新了我的答案，并添加了关于 46% 的解释。

我在实施这个解决方案时遇到了一些麻烦，你能解释一下我哪里出错了 - 我会用新的问题来编辑我的问题。

刚才，我以为我已经得到了导致 7px 的计算（对于第二种情况），但是当我再次验证它时不知何故它不起作用。奇怪的是，来自 FB api 的 URL 的图像大小是 720x266px，而实际 FB 页面上的图像大小是 800x296px。实际的 fb 事件页面在图像的右侧也有 7px 的间隙（请参见白到灰渐变条），因为它移动了 left: -7px。你的第三种情况的1800也很奇怪，能不能把它的json结果给我？我会继续调查，稍后再通知您。

是的，这很混乱，而且混乱来自于 fb 文档与实际的 api 响应。这是 1800-json :-) "cover": "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": "1124188834362717"

【参考方案2】：

我已经看到这种方法用于 FB 的偏移量。

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

【讨论】：

感谢您的建议，但此答案取自 ***.com/questions/10393742/… ，正如我已经说过的，对我不起作用。