在 html 中使用浏览器 window 调整图像大小和文本位置

Question

我正在为西门子 PLC 开发一个网页，用于显示生产线上哪里有潜力 "traffic jam"。我的计划是将生产线的 .jpg 图像插入网页，然后将红色圆圈放在生产线的每台机器上。然后我会用 javascript 和 jquery 改变颜色。

我已经弄明白了，如何根据 PLC 变量用 jquery 和 javascript 改变 css 圆圈的颜色。主要问题是，我希望我的生产线图像能够使用浏览器 window 调整大小，如本例所示：

jfiddle

 html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    img {
      padding: 0;
      display: block;
      margin: 0 auto;
      max-height: 100%;
      max-width: 100%;
    }

所以现在我的问题是，如何在图像上定位我的圆形指示器，以便即使在浏览器 window 调整大小时指示器也能保持其在图片上的位置？

Answer 1

这个成就最好使用svg图片或者canvas。您可以使用 Javascript 轻松定位元素。

在 html 中使用浏览器 window 调整图像大小和文本位置

Resizing image size and text position with browser window in html

html

javascript

css

jquery

webpage