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

Question

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

我已经想出了如何根据PLC变量用jquery和javascript改变css圆圈的颜色。主要问题是，我希望通过浏览器窗口调整生产线的大小，如本例所示：

小提琴

 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轻松地定位元素。