Facebook API 覆盖背景位置属性中的图像偏移
Facebook API cover images offsets in background-position attributes
!!!如果现在有人能回答这个问题,我会等赏金期结束,涨到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;
}
height/width 是基于 facebook 使用的确切比例:2,8:1
HTML
<div class="event-image" style="background-image: url([url of img]); background-position: [offset_x]% [offset_y]%;" >
(我确实有一些内部逻辑,如果 fb api 中有一组,则只添加背景位置 属性。)
问题是这只在 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 文档,它应该在 0-100 之间。
我已经看到这种方法被用于 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
中使用它时以百分比表示的偏移量,这意味着包含块高度的百分比(spec here). And that is different to when using it in background-position
(spec here). There is also 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
,rendered/scaled 图片大小为 500 x 375 像素。
图片高度比框高大 375-178 = 197px。请记住,当使用 background-position: 100%
时,图像的底部边缘将与框的底部边缘相交,这意味着 top: -197px
.
!!!如果现在有人能回答这个问题,我会等赏金期结束,涨到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;
}
height/width 是基于 facebook 使用的确切比例:2,8:1
HTML
<div class="event-image" style="background-image: url([url of img]); background-position: [offset_x]% [offset_y]%;" >
(我确实有一些内部逻辑,如果 fb api 中有一组,则只添加背景位置 属性。)
问题是这只在 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 文档,它应该在 0-100 之间。
我已经看到这种方法被用于 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
中使用它时以百分比表示的偏移量,这意味着包含块高度的百分比(spec here). And that is different to when using it in background-position
(spec here). There is also 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
,rendered/scaled 图片大小为 500 x 375 像素。
图片高度比框高大 375-178 = 197px。请记住,当使用 background-position: 100%
时,图像的底部边缘将与框的底部边缘相交,这意味着 top: -197px
.