如何将Instagram图片标签坐标转换为CSS px单位？

Instagram给出的这个position里的x、y值是相对图片本身宽高的比例值（范围在0到1之间），要转成CSS的px格式，用下面的公式就行：

• 像素X坐标 = 图片实际显示宽度（单位：px） × 相对X值
• 像素Y坐标 = 图片实际显示高度（单位：px） × 相对Y值

举个实际例子 #

假设你要用到的Instagram图片实际显示尺寸是宽1080px、高1350px（Instagram帖子的常见尺寸），代入你给出的数值计算：

• X坐标：1080 × 0.5162392854690552 ≈ 557.54px
• Y坐标：1350 × 0.44017091393470764 ≈ 594.23px

响应式场景的用法 #

如果图片是自适应缩放的，直接写固定px可能会错位，推荐用CSS变量结合calc()动态计算，示例代码：

/* 给图片容器定义变量存储宽高（也可以根据实际情况动态设置） */
.post-image-container {
  --img-display-width: 100%; /* 或者具体数值，比如540px */
  --img-display-height: auto;
  position: relative;
}

/* 标记点样式 */
.user-tag {
  position: absolute;
  left: calc(var(--img-display-width) * 0.516239);
  top: calc(var(--img-display-height) * 0.440171);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(255,255,255,0.8);
}

注意：一定要用图片实际在页面中显示的宽高来计算，不是图片的原始尺寸，否则标记位置会不准。

内容的提问来源于stack exchange，提问作者Logan