Convert x, y coordinates into px-CodePudding

Imagine there is a post in Instagram and someone tagged in the picture and the coordinates of the tagged-person-icon in the picture is something like :

position: [ 
      x = 0.5162392854690552,
      y = 0.44017091393470764
  ]

So my goal is to convert this position into px format( by px I mean the px in the css) so I'll be able to use it the way I want it .

I believe that there is some formula to do that , but I didn't find it.

CodePudding user response：

Multiply x by width and y by height.

$position = [
    'x' => 0.5162392854690552,
    'y' => 0.44017091393470764
];

$width = 800;
$height = 800;

$x = round($position['x'] * $width);
$y = round($position['y'] * $height);

$css = "position: absolute; top: {$y}px; left: {$x}px;";
echo $css;

gives you

position: absolute; top: 352px; left: 413px;

Update

If the image is responsive use percentage as @schmauch mentioned in the comment.

$x = round($position['x'] * 100);
$y = round($position['y'] * 100);

$css = "position: absolute; top: {$y}%; left: {$x}%;";
echo $css;

gives you

position: absolute; top: 44%; left: 52%;