固定位置的响应式图像周围的内容

Question

我有这张图和一些关于它的价值观；只要图像没有响应，它就可以正常工作。但是，当我包含响应性类时，值往往会在不同的屏幕上失真。

这是用于在代码周围动态定位值的 JS 代码。

var letter , letter1 , letter2 , letter3;

var letter = {
  label: a,
  top: 253,
  left: 29
}

var letter1 = {
  label: b,
  top: 160,
  left: 150
}

var letter2 = {
  label: c,
  top: 70,
  left: 350
}

var letter3 = {
  label: d,
  top: 270,
  left: 260
}

var letter_elem = document.createElement('span');
letter_elem.style.top = letter.top + 'px';
letter_elem.style.left = letter.left + 'px';
letter_elem.innerHTML = letter.label;
letter_elem.className = 'sam_number';

var letter_elem1 = document.createElement('span');
letter_elem1.style.top = letter1.top + 'px';
letter_elem1.style.left = letter1.left + 'px';
letter_elem1.innerHTML = letter1.label;
letter_elem1.className = 'sam_number';

var letter_elem2 = document.createElement('span');
letter_elem2.style.top = letter2.top + 'px';
letter_elem2.style.left = letter2.left + 'px';
letter_elem2.innerHTML = letter2.label;
letter_elem2.className = 'sam_number';

var letter_elem3 = document.createElement('span');
letter_elem3.style.top = letter3.top + 'px';
letter_elem3.style.left = letter3.left + 'px';
letter_elem3.innerHTML = letter3.label;
letter_elem3.className = 'sam_number';

我很确定它与顶部和左侧位置有关。

这里是链接：

非响应式图像；这些值定位完美，但图像在某些移动设备上被剪切。

http://ssdmm.org/if/simple/562.html

响应式图像代码：

http://ssdmm.org/if/responsive/562.html

感谢您的宝贵时间。 :)

Answer 1

即将按百分比为您重新编辑。