css - 基于窗口宽度的div垂直位置

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"});
}