Javascript 将文字放置在img-s的准确位置，并保持在那里

我很难定位一个网站。我有一个背景图像，根据它，我想要一些文本，应该留在这个img的确切位置。因此，如果图像因为分辨率不同而移动，文本应该随着img移动（这些将是菜单项，这就是为什么我需要它们，它们应该出现在章鱼的触角上）

此外，如果img和文本的位置在css中是固定的，那么在较小的分辨率上，只有一小部分img出现。卷轴出现，但如果我使用它们，无论如何只能看到img的这些部分

救命啊(

我会接受任何解决方案，即使是jquery或javascript，无论我如何解决这个问题

谢谢大家!

---

编辑：我对网站做了一点修改：现在我有了一个背景img，上面有一个div（这是基础）。在它里面有一个章鱼的图像。我有菜单（文本以div表示），应该一直放在触角上。所以我需要章鱼和菜单一起移动，并且总是被看到（以任何分辨率显示整个图像）。章鱼现在可以看到所有时间与此宽度/高度：100%设置。我还需要将其居中，但无论我如何尝试，它都不起作用，但这是一个较小的问题。最大的问题仍然是应随图片移动的菜单（停留在触手上的图片上）。

您可以使用删除滚动

overflow:hidden; 

---

我希望这能帮助你

.atag1{
位置：绝对位置；
最高：5%；
左：2%；
}
.atag2{
位置：绝对位置；
最高：18%；
左：5%；
}
.atag3{
位置：绝对位置；
最高：30%；
左：18%；
颜色：蓝色；
}
.atag4{
位置：绝对位置；
最高：50%；
左：60%；
颜色：蓝色；
}
文本1
文本2
文本3
文本3
改变形象
$（文档）.ready（函数（）{
$（“#包装器”）.draggable（{containment:“parent”}）；
$（“#b”）。单击（函数（）{
$（“#包装器”）.show（）.animate（{“宽度”：（Math.random（）*360）+0}，“慢”）；
$（“#wrapper”）.show（）.animate（{“height”：（Math.random（）*360）+0}，“slow”）；
})
});

---

您是否创建了一个JSFIDLE来展示您所面临的问题？这不是我想要的，因为在小分辨率下，只有图像的一部分会出现，但我需要始终看到它的全部（整个图片）。我对网站做了一点更改：现在我有了一个背景img，上面有一个div（这是基础）.里面是另一张八达通的图片。我有菜单（文本以div表示），应该始终保持在触手上。所以我需要八达通和菜单一起移动，并且始终被看到（以任何分辨率显示整个菜单）。章鱼现在可以看到所有的时间与此宽度/高度：100%设置。我也需要它的中心，但它没有任何工作，我尝试，但这是较小的问题。最大的仍然是菜单，应该与图片移动（停留在图片上的触手）。你能给我看一些解释图片来了解你需要什么，或者在这里添加你的代码吗？我只能用这种方式来说明。我的代码乱七八糟，无法正常工作，因此它将毫无用处：/

.atag1{
   position:absolute; 
    top:5%;
    left:2%;
}
.atag2{
   position:absolute; 
    top:18%;
    left:5%;
}
.atag3{
   position:absolute; 
    top:30%;
    left:18%;
     color:blue;
}
.atag4{
   position:absolute; 
    top:50%;
    left:60%;
     color:blue;
}



<div id="container" style="background:red;width:500px;height:500px;opacity:1" ui-widget-content> 

  <div style="background:black;width:300px;height:300px;opacity:1" id="wrapper">
      <img id="img" style="width:100%;height:100%" src="http://cdn7.staztic.com/app/a/2270/2270821/cartoon-and-photoshop-camera-789676-3-s-307x512.jpg">  </img>
       <a class="atag1" >text1</a>
      <a class="atag2" >text2</a>
      <a class="atag3" >text3</a>
      <a class="atag4" >text3</a>

    </div>

    <button  id ="b"  >change image </button>   
</div>


$( document ).ready(function() {
   $("#wrapper").draggable({ containment: "parent" });
    $("#b").click(function(){
    $("#wrapper").show().animate({ "width": (Math.random() * 360) + 0 }, "slow");
     $("#wrapper").show().animate({ "height": (Math.random() * 360) + 0 }, "slow");
    })



});