背景画像の上に画像を載せてレスポンシブにしてもずれないようにしたい。

下記のような感じで背景に地図の画像を入れ、その上に複数のピンを載せたいです。
そして、そのピンをクリックできるようにしたいので、ピンと地図は分けて画像にしたいです。
（画像参照してください。）

また、これはレスポなので、可変して地図が小さくなると
一緒にピンの画像も小さくなって、ブラウザ幅を変えても
指定した位置にピンの針がある状態にしたいのですが、それができません。

現在は地図が小さくなっても、ピンが小さくならない状態なので、位置がずれてしまいます。
どのように対応すれば良いかご教授頂けますと幸いです。

<style type="text/css" media="screen">
html, body{
  width: 100%;
  height: 100%;
  margin: 0;
}
div{
  background-image: url(img/shop/tokyo_map.jpg);
  padding-top:58%;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
a{
  position: absolute;
  top: 30%;
  left: 76%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
</style>

<body>
    <div>
    <p class="fea_hari01 fea_hari"><a href="#point01"><img src="img/shop/hari.png" /></a></p>
    </div>
</body>

行動規範の内容に同意します

回答1件

ベストアンサー

背景画像のサイズを100%して、ピンの画像の幅を2%とするなら、

CSS
1a{
2  position: absolute;
3  top: 30%;
4  left: 76%;
5  -webkit-transform: translateY(-50%);
6  -ms-transform: translateY(-50%);
7  transform: translateY(-50%);
8  display: block;
9  width: 2%;
10}
11
12a img {
13  width: 100%;
14  height: auto;
15}