javascript - 图像图标不固定，屏幕尺寸可变

Question

我正在制作一个包含 <div> 的部分包含大图像和三个图像图标。我已经为大图像和超大图像修复了它们，但是一旦屏幕尺寸改变它的位置，大图像就会改变它的大小并且图标会从该位置移开。我想让他们修好。

这是网站:SERVICES ，它不是那样工作的，但想法是相似的。它具有激活的圆点，无论屏幕尺寸如何，您都会发现圆点固定在同一位置。我已尽力而为，但无法获得理想的结果。 这是我通过代码片段编写的虚拟代码，以便让您更清楚地了解我的代码实际上是什么。

a img.img-logo {width: 55px; height: 55px; visibility: visible}
  a.intro-logo-1 {top: 33.6%;left: 57.6%; position:absolute; cursor: pointer}
  a.intro-logo-2 {top: 71.8%; left: 32.5%; position:absolute; cursor: pointer}
  a.intro-logo-3 {top: 84.2%; left: 25%; position:absolute; cursor: pointer}

<div class='row' style='height: 100%'>
      <div class="col-5 box-one slideshow-wrapper">
        BOX CONTENT
      </div>
      <div class='logo-grp col-7' style='position: relative'>
        <img src='http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c53e.png' alt='' style='width: 550px; height: 690px'>
        <a class='intro-logo-1'><img class='img-logo' src='http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c53e.png'></a>
        <a class='intro-logo-2'><img class='img-logo' src='http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c53e.png'></a>
        <a class='intro-logo-3'><img class='img-logo' src='http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c53e.png'></a>
      </div>
    </div>

结果是这样的，对于宽屏是:

屏幕尺寸缩小时的结果:

请帮忙，我已经尽力了。需要得到结果。提前谢谢大家。

Answer 1

您没有将 Logo 组 div 的大小限制为图像的大小，因此小图像似乎相对于较大的 div 框移动。只需添加:

.logo-grp {width: 550px; }

参见:http://jsfiddle.net/jcxq64rz/3

请注意:这似乎是 Bootstrap 网格中的一列，所以不要像我那样更改该列，而是在图像周围添加一个 div。