Facebook API covers image offsets in background-position attributes

Question

!!! If someone can answer this now, I will wait until the end of the reward period and until 150 before his reward. (Scouts honor!) !!!

I looked around, but I can not find the answer to this question:

I get event cover images from fb api and also save offset_x and offset_y values. Then I put the images as css background-images as follows:

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

Height / Width is based on the exact ratio used by facebook: 2.8: 1

HTML

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

(I have some internal logic that only adds the background-position property if there is one set in fb api.)

The problem is that it only works 90% of the time. About 10% of the images are slightly aligned. usually only a few percentage points: - (

Here is an example.

.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%; ">	</div>
<!-- Offsets are taken directly from API -->

Run codeHide result

, 46% - fb 50%?

, , , , .

, :

fb, offset_x fb -7px, 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

.

50 fb api, -, , top, (spec ). background-position (spec ). , .

background-position, px. top, % px.

, , fb , ( ):

/* Your original code */
.event-image {
	width: 500px;
	height: 178px;
	background-size: cover;
	background-image: url("https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg");
	background-position: 0 50%;  /* "50" is from fb api, but not used correctly */
}

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

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

/* The correct code using "top" in px */
.correct-cover img.px {
	position: absolute;
	width: 100%;
	left: 0;
	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">
	<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">
	<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">
	<img class="px" src="https://scontent-sit4-1.xx.fbcdn.net/t31.0-0/p600x600/14566476_1295215523823549_1334771895810946224_o.jpg" />
</div>
<br />

Hide result

, 46% :

background-position: 0% top: 0px

background-position: 100% top: -197px

background-position: 50% top: -98.5px (197 x 50%)

background-position: 46% top: -90.62px (197 x 46%), - top: -89px, .

197? - 500 x 178 . - 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) + '%');
});