像地圖一樣移動圖像

Question

我正在嘗試製作一個遊戲的在線地圖。但我在移動地圖時遇到問題...

此代碼僅在將容器（div與地圖圖像） 設置爲height：6000px時才起作用;和寬度：6000px;

但我必須使用身高：100％;寬度：100％;獲得「背景大小：封面」;工作有地圖「縮小」 /「適應屏幕」爲最好看IMO

$(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/ 使用「谷歌檢查元素」來測試我的意思。 （在#container中將100％更改爲6000px）

Answer 1

問題是，當您設置100％高度值時，它將從父容器獲取縱向長度。如果conatiner是人體標籤，它會調整內容的大小，它可能非常小巧。例如，您需要將大小設置爲指定的大小，您可以使用窗口大小。