屏幕尺寸可变时图像图标不固定

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

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

.logo-grp {width: 550px; }

请参阅：http://jsfiddle.net/jcxq64rz/3

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

Answer 2

您需要为图标图像赋予绝对位置，但主图像需要与图标对齐。

引用：RatioBuddy