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

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

关于重新为您提供百分比。