如何计算Facebook图形api覆盖offset_y到像素？

Question

我可以从图api中检索facebook封面源和offset_y,例如 -

https://graph.facebook.com/Inna

我明白了 -

"cover": {
      "cover_id": "10151356812150381",
      "source": "http://sphotos.xx.fbcdn.net/hphotos-snc7/s720x720/419277_10151356812150381_302056140380_23114100_97822830_n.jpg",
      "offset_y": 54
   }

但是,当我查看实际的Facebook页面时,我看到顶部偏移是-135px.这是如何从54计算的？

我想在我的网站上显示某些封面照片,与Facebook的偏移量相同.所以我基本上在做 -

<div class="ed-cover">
            <img src=""/>
    </div>

CSS -

.ed .ed-cover
{
    height:315px;
    overflow:hidden;
    position:relative;
}

.ed .ed-cover img
{
    width:100%;
    position:absolute;    
}

JS -

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

但是这里对于"top"属性的CSS偏移是不正确的,因为我回到54并且实际偏移是-135px;

Answer 1

这真的对你有用吗？我已经用许多图像(横向和纵向)测试了它,如果使用%,则位置总是略有不同.这对我有用:

$.fn.positionate_cover = function (offset_y) {
    var cover_w = 850;
    var cover_h = 315;
    var img_w = $(this).width ();
    var img_h = $(this).height ();
    var real_img_h = (cover_w * img_h / img_w) - cover_h;

    $(this).css ({ top: parseInt (real_img_h * offset_y / 100 * -1) + "px" });
};

$(".ed-cover img")
    .attr ("src", data.cover.source)
    .positionate_cover (data.cover.offset_y)
;

Answer 2

是的,我实际上自己找到了答案.facebook发送的偏移量是百分比!

以下工作完美 -

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