基于窗口宽度划分垂直位置

Question

我有一张图片，我已将其设置为调整窗口宽度的100％。

我有一个文本div，我想要定位在该图像的某个部分（因此它是可读的）。

因为图像的高度随宽度而变化，我需要将文本div上下移动，使其保持在图像的特定部分上。

有没有办法自动调整div的垂直位置？

感谢。

Answer 1

假设html是：

<div class="container">
 <div id="image"><img src="abc.png" /></div>
 <div id="text">some text</div>
</div>

您将添加以下jquery脚本以将文本始终放在图像层中：

$(document).ready(function(){
  putInsideImage();
});
function putInsideImage(){
 var h = $("#image").innerHeight();
 var w = $("#image").innerWidth();
 $("#text").css({"margin-top":-(h/2) + "px", "margin-left": (w/2) + "px"});
}