使用html中的浏览器窗口调整图像大小和文本位置

Question

我正在为西门子PLC开发一个网页，用于显示生产线上的潜在“交通拥堵”。我的计划是将生产线的.jpg图像插入网页，然后在生产线的每台机器上放置红色圆圈。然后我会用javascript和jquery改变颜色。

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

jfiddle

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

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

所以现在我的问题是，如何在图像上定位圆形指示器，这样即使调整浏览器窗口大小，指示器也会保持在图像上的位置？

Answer 1

你最好使用svg图像或画布来获得这个成就。您可以使用Javascript轻松定位元素。