时间戳

首页 > 解决方案 > 图像图标不固定，屏幕尺寸可变

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

问题描述

我正在制作一个<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>

结果是这样的，对于宽屏来说是：

宽屏上的完美图像

屏幕尺寸缩小时的结果：

错位的图标

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

标签： javascripthtmlcss

解决方案

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

.logo-grp {width: 550px; }

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

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

推荐阅读