Question

我有一张地图，上面有一些带有position: absolute的图钉。如何使引脚对所有设备响应？有没有办法让他们跟随父母div？我尝试使用media-queries，但要专门为这些别针设置样式需要花费很多时间。这是demo。

HTML：

<div class="map-wrapper">
  <div class="map"></div>
  <a class="rpin code-warszawa"></a>
  <a class="rpin code-gdansk"></a>
  <a class="rpin code-kalisz"></a>
  <a class="rpin code-kielce"></a>
  <a class="rpin code-konin"></a>
  <a class="rpin code-krakow"></a>
  <a class="rpin code-ostrow-wielkopolski"></a>
  <a class="rpin code-poznan"></a>
  <a class="rpin code-wroclaw"></a>
</div>

CSS：

  .map-wrapper {
    width: 50%;
    height: 60vh;
    margin: 0 auto;
    position: relative;
  }
  .map {
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    margin: 0 auto;
    background-image: url('https://s33.postimg.cc/v6fu8qirj/rst-map.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  .rpin {
    position: absolute;
    display: block;
    width: 30px;
    height: 40px;
    background: url('https://s33.postimg.cc/6d6a8b4yn/pin.png') no-repeat center center;
    background-size: contain;
    transform: translateX(-50%) translateY(0);
    filter: brightness(1) contrast(1.1);
    transition: all .3s ease;
  }
  .rpin:hover {
    cursor: pointer;
    transform: translateX(-40%) scale(1.05);
  }
  .code-warszawa {
    bottom: 55.9282%;
    left: 65.5994%;
  }
  .code-gdansk {
    bottom: 89.858%;
    left: 45.716%;
  }
  .code-kalisz {
    bottom: 45.2392%;
    left: 39.4641%;
  }
  .code-kielce {
    bottom: 27.9065%;
    left: 62.2945%;
  }
  .code-konin {
    bottom: 53.4868%;
    left: 41.3139%;
  }
  .code-krakow {
    bottom: 14.1059%;
    left: 57.1113%;
  }
  .code-ostrow-wielkopolski {
    bottom: 43.573%;
    left: 36.9038%;
  }
  .code-poznan {
    bottom: 56.831%;
    left: 31.9521%;
  }
  .code-wroclaw {
    bottom: 33.6384%;
    left: 32.7036%;
  }

Answer 1

您听说过图片地图吗？您可以将链接区域设置在图像上的特定位置，并且它可以响应。

要使用图钉，应使用照片编辑器将它们应用到图片上，并将这些区域放在这些图钉上方。

查看此image map generator。

Answer 2

将地图图像放入HTML 中，而不是背景图像中，并且其包装也可以包含该图像和图钉。

然后使用position:relative的包装器将销钉完全定位（如您所愿），所需要做的只是调整位置百分比值。

我还建议使用%调整引脚的大小，以便它们随地图缩放

注意：此演示中的插针位置尚未调整。

Codepen Demo of below code

.map {
  display: inline-block;
  margin: 1em auto;
  position: relative;
  border: 1px solid grey;
}

.map img {
  max-width: 100%;
  display: block;
}

.rpin {
  position: absolute;
  display: block;
  width: 5%;
  height: 5%;
  background: url('https://s33.postimg.cc/6d6a8b4yn/pin.png') no-repeat center center;
  background-size: contain;
  transform: translateX(-50%) translateY(0);
  filter: brightness(1) contrast(1.1);
  transition: all .3s ease;
}

.rpin:hover {
  cursor: pointer;
  transform: translateX(-40%) scale(1.05);
}

.code-warszawa {
  bottom: 55.9282%;
  left: 65.5994%;
}

.code-gdansk {
  bottom: 89.858%;
  left: 45.716%;
}

.code-kalisz {
  bottom: 45.2392%;
  left: 39.4641%;
}

.code-kielce {
  bottom: 27.9065%;
  left: 62.2945%;
}

.code-konin {
  bottom: 53.4868%;
  left: 41.3139%;
}

.code-krakow {
  bottom: 14.1059%;
  left: 57.1113%;
}

.code-ostrow-wielkopolski {
  bottom: 43.573%;
  left: 36.9038%;
}

.code-poznan {
  bottom: 56.831%;
  left: 31.9521%;
}

.code-wroclaw {
  bottom: 33.6384%;
  left: 32.7036%;
}

<div class="map"><img src="https://s33.postimg.cc/v6fu8qirj/rst-map.png" alt="">
  <a class="rpin code-warszawa"></a>
  <a class="rpin code-gdansk"></a>
  <a class="rpin code-kalisz"></a>
  <a class="rpin code-kielce"></a>
  <a class="rpin code-konin"></a>
  <a class="rpin code-krakow"></a>
  <a class="rpin code-ostrow-wielkopolski"></a>
  <a class="rpin code-poznan"></a>
  <a class="rpin code-wroclaw"></a>
</div>

这是我随身携带的一个演示（使用单个图钉），并且在悬停时图钉上的内容

Codepen Demo

如何使图钉跟随地图？

2 个答案: