Facebook API封面圖片在背景位置屬性中的偏移

Question

!!!如果任何人現在可以回答這個問題，我會等待賞金期結束，並在獎勵之前將其提高到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]%;" > 

（我確實有一些內在的邏輯，只有增加的背景positio n財產，如果在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%; "> \t </div> 
 
<!-- Offsets are taken directly from API -->

現在這裏是actual event

你可以看到，實際上偏移會完美的46％ - 那爲什麼fb給50％？

我能找到的最多的信息是pixel calculations，但考慮到我正在使用百分比，這沒有用。

編輯

新頒佈實施ELFAN的解決方案：

Here is an event在FB裏的圖像具有offset_x在-7px實際的FB - 但根據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之間。

Answer 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 { 
 
\t width: 500px; 
 
\t height: 178px; 
 
\t background-size: cover; 
 
\t background-image: url("https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg"); 
 
\t background-position: 0 50%; /* "50" is from fb api, but not used correctly */ 
 
} 
 

 
/* FB actual code */ 
 
.cover { 
 
\t width: 826px; 
 
\t height: 294px; 
 
\t position: relative; 
 
\t overflow: hidden; 
 
} 
 
.cover img { 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t left: 0; 
 
\t 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 { 
 
\t width: 826px; 
 
\t height: 294px; 
 
\t background-size: cover; 
 
\t background-image: url("https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg"); 
 
\t background-position: 0 50%; /* "50" is from fb api, but not used correctly */ 
 
} 
 

 
/* The correct code using "background-position" */ 
 
.correct-image { 
 
\t width: 500px; 
 
\t height: 178px; 
 
\t background-size: cover; 
 
\t background-image: url("https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg"); 
 
\t 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 { 
 
\t width: 500px; 
 
\t height: 178px; 
 
\t position: relative; 
 
\t overflow: hidden; 
 
} 
 
.correct-cover img.pct { 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t left: 0; 
 
\t top: -50%; /* the correct usage of "50" from fb api */ 
 
} 
 

 
/* The correct code using "top" in px */ 
 
.correct-cover img.px { 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t left: 0; 
 
\t 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"> 
 
\t <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"> 
 
\t <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"> 
 
\t <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×50％）

background-position: 46%相同top: -90.62px（197 X 46％），而正確的是top: -89px，使得看起來足夠接近。

197從哪裏來？ 框的大小是500 x 178px。實際圖像尺寸爲800 x 600像素。由於background-size: cover的渲染/縮放圖像大小爲500 x 375像素。 圖像高度比盒子高度大375-178 = 197px。請記住，使用background-position: 100%時，圖像的底部邊緣將與框的底部邊緣相符，這意味着top: -197px。

Answer 2

我已經看到這種方法被用於關於來自FB的偏移。

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