Разделить вертикальное положение на основе ширины окна

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