Поместите элемент в соответствии с размером браузера

Question

Я пытаюсь поместить изображение на большее изображение. Пока я делаю это в соответствии с отступом слева и отступом. В частности, я использую следующий метод, чтобы получить прописку слева и верхнюю часть:

function getOffsetRect(elem) { 
    // (1) 
    var box = elem.getBoundingClientRect() 

    var body = document.body 
    var docElem = document.documentElement 

    // (2) 
    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop 
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft 

    // (3) 
    var clientTop = docElem.clientTop || body.clientTop || 0 
    var clientLeft = docElem.clientLeft || body.clientLeft || 0 

    // (4) 
    var top = box.top + scrollTop - clientTop 
    var left = box.left + scrollLeft - clientLeft 

    return { top: Math.round(top), left: Math.round(left) } 
} 

Это прекрасно работает. Я получаю точное положение верхнего левого угла моего изображения и когда я позиционировать DIV на нем, например,

$("#testDiv").css({top: element.top, left: element.left, position: 'absolute'});

позиционируется в точном местоположении. Моя проблема заключается в том, что, когда я использую более крупный монитор или изменяю размер окна, большее изображение, которое имитирует меньшее изображение, становится меньше или больше, и поэтому исходный верх и верхняя часть нижней части, где должны располагаться меньшие изображения, становятся вводит в заблуждение. Как я могу настроить положение для разных размеров монитора/изменения размера окна, чтобы получить его в том месте, где оно принадлежит?

Answer 1

Это проще всего сделать с помощью запросов CSS Media. У W3 Schools есть хорошая страница на них, чтобы вы могли легко их повесить. Я бы рекомендовал проверить их, и отзывчивый дизайн станет легким.

Answer 2

Вам нужно будет снова вызвать этот метод (а затем применить новые значения к местоположению изображения верхнего уровня) при изменении размера окна.

Вы можете сделать это, добавив слушатель событий (хотя вы хотели бы, чтобы второй аргумент быть метод, который вызывает getOffsetRect, затем применяет возвращаемое значение к существующему изображению):

window.addEventListener('resize', getOffsetRect(elem));