Facebook API покрывает изображения смещения в атрибутах фонового положения

Question

!!! Если кто-то может ответить на это сейчас, я буду ждать окончания периода награды и до 150 до его награждения. (Скауты чтят!) !!!

Я посмотрел вокруг, но не могу найти ответ на этот вопрос:

Я получаю обложку события изображения из фба 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]%;" > 

(у меня есть какая-то внутренняя логика, которая только добавляет фоновое позиционирование 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, но учитывая, что я использую проценты, это было бесполезно.

EDIT

Новый вопрос реализации решения elfan в:

Here is an event на ФБ, где изображение имеет offset_x в реальной фб странице -7px - но по АНИ, то 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

Существует проблема с интерпретацией.

Значение 50 из fb api, по-видимому, относится к смещению в процентах, как при использовании в top, что означает процент от высоты блока (spec here). И это отличается от использования в background-position (spec here). Существует также an article here, что визуально показывает разницу.

Если вы хотите использовать background-position, решение проблемы заключается в использовании px. Кроме того, вы можете использовать top, либо как %, либо px.

Я сделал следующий код, чтобы сравнить свой код, код Ф.Б., и что исправление должно быть (для всех вариантов):

/* 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 х 46%), в то время как правильно один top: -89px, так что выглядит достаточно близко.

Откуда: 197? Размер коробки 500 x 178px. Фактический размер изображения - 800 x 600 пикселей. Размер рендеринга/масштабированного изображения из-за background-size: cover составляет 500 x 375 пикселей. Высота изображения 375-178 = 197 пикселей больше, чем высота окна. Помните, что при использовании 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) + '%'); 
});