javascript - 如何计算 Facebook graph api cover offset_y to pixel？

Question

例如，我可以从 graph 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 页面时，我看到顶部偏移量是 -135 像素。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)
;