Перемещение вокруг изображения как карта

Question

Я пытаюсь сделать онлайн-карту для игры. Но у меня проблемы с перемещением по карте ...

Этот код работает, только если я установил контейнер (div с изображением карты) на высоту: 6000 пикселей; и ширина: 6000 пикселей;

Но я должен использовать высоту: 100%; ширина: 100%; получить «размер фона: обложка»; работать, чтобы иметь карту «масштаб изображения»/«подходят к экрану» за лучший внешний вид имо

$(document).ready(function() 
    { 
     var 
      clicked, 
      clickY 
     ; 
     $(document).on(
     { 
      'mousemove': function(e) {clicked && updateScrollPos(e);}, 
      'mousedown': function(e) 
      { 
       clicked = true; 
       clickY = e.pageY; 
       clickX = e.pageX; 
      }, 
      'mouseup': function() 
      { 
       clicked = false; 
       $('html').css('cursor', 'auto'); 
      } 
     }); 

     var updateScrollPos = function(e) 
     { 
      $('html').css('cursor', 'all-scroll'); 
      $(window).scrollTop($(window).scrollTop() + (clickY - e.pageY)); 
      $(window).scrollLeft($(window).scrollLeft() + (clickX - e.pageX)); 
     } 
    }); 

Это в настоящее время, как она выглядит: http://5.231.49.167/map/ Использование «Google инспектировать элемент», чтобы проверить, что я имею в виду. (Измените значение 100% на 6000 пикселей в #container)

Answer 1

Проблема в том, что при установке значения высоты 100% требуется длинное расстояние от родительского контейнера. Если conatiner является тегом тела, он корректирует размер содержимого, который сам по себе может быть очень простым. Вам нужно настроить размер до определенного размера, например, вы можете использовать размер окна.