Décalages d'images de couverture de l'API Facebook dans les attributs de position de fond

Question

!!! Si quelqu'un peut répondre maintenant, j'attendrai la fin de la période de primes, et jusqu'à 150 avant de l'accorder. (L'honneur des Scouts!) !!!

J'ai regardé autour mais ne peut pas trouver une réponse à cette question:

Je reçois des images de couverture d'événements de fb api, et également de stocker les valeurs offset_x et offset_y. Ensuite, je place les images sous forme d'images d'arrière-plan-css comme ceci:

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; 
    } 

La hauteur/largeur est basée sur le rapport exact utilisé par Facebook: 2,8: 1

HTML

<div class="event-image" style="background-image: url([url of img]); background-position: [offset_x]% [offset_y]%;" > 

(j'ai une logique interne qui ne fait qu'ajouter l'arrière-plan positio n propriété s'il y a un ensemble dans l'API fb.)

Le problème est que cela ne fonctionne que 90% du temps. Environ 10% des images sont légèrement alignées. habituellement seulement par quelques points de pourcentage :-(

Voici un exemple.

.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 -->

Maintenant, voici le actual event

Vous pouvez voir que en fait le décalage serait parfait à 46% - alors pourquoi fb donne-t-il 50%?

Le plus d'infos que je peux trouver sur pixel calculations, mais vu que j'utilise des pourcentages, ce n'était pas utile.

EDIT

Nouvelle émission mise en œuvre de la solution de Elfan:

Here is an event sur fb où l'image a offset_x dans la page fb réelle de -7px - mais selon l'api, l'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" 
} 

Ainsi, en utilisant le calcul 500px (width of my image) * offset_x % = 250px

Qu'est-ce que je fais de mal :-)

J'ai aussi remarqué qu'il y a des événements qui ont des décalages de folie, comme 1800 par exemple. Selon fb docs, il devrait être entre 0-100.

Answer 1

Il y a un problème avec l'interprétation.

La valeur 50 de fb api désigne apparemment le décalage en pourcentage que lorsqu'il est utilisé dans top, ce qui signifie que le pourcentage de la hauteur du bloc contenant (spec here). Et c'est différent de l'utiliser dans background-position (spec here). Il y a aussi an article here qui montre visuellement la différence. Si vous souhaitez utiliser background-position, la solution est d'utiliser px. Vous pouvez également utiliser top, soit % ou px.

J'ai fait le code ci-dessous pour comparer votre code, le code de fb, et ce que le correctif doit être (pour toutes les alternatives):

/* 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 />

explication supplémentaires sur pourquoi 46% regards correct dans votre code d'origine:

background-position: 0% est le même que top: 0px

background-position: 100% est le même que top: -197px

background-position: 50% est le même que top: -98.5px (197 x 50%)

background-position: 46% est le même que top: -90.62px (197 x 46%), tandis que le bon est top: -89px, de sorte que semble assez proche.

D'où vient 197? La taille de la boîte est 500 x 178px. La taille réelle de l'image est de 800 x 600 pixels. La taille d'image rendue/mise à l'échelle due à background-size: cover est 500 x 375px. La hauteur de l'image est de 375-178 = 197 px plus grande que la hauteur de la boîte. Rappelez-vous que lorsque vous utilisez background-position: 100%, le bord inférieur de l'image rencontrera le bord inférieur de la boîte, ce qui signifie top: -197px.

Answer 2

J'ai vu cette méthode utilisée en ce qui concerne les offsets de FB.

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