固定位置响应图像的内容

时间:2016-11-05 02:44:04

标签: javascript css responsive-design

我有这个图表及其周围的一些值;只要图像没有响应,这工作正常。但是,当我包含响应性类时,值会在不同的屏幕上变形。

这是用于动态定位代码周围值的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

感谢您的时间。 :)

1 个答案:

答案 0 :(得分:0)

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