전체 화면 크기 조정 배경 이미지 오버레이

Question

브라우저의 크기가 조정됨에 따라 배경 이미지의 크기가 조정되는 페이지가 있습니다. 알아 내고자하는 것은 파란색 마커 이미지 스케일을 만들고 배경에 비례하여 위치를 유지하는 방법입니다. 예를 들어, 파란색 마커가 항구의 끝에 있으면 브라우저를 축소했을 때 마커가 항구의 끝에 머무르고 브라우저의 새로운 크기와 비례하여 크기가 축소되기를 원합니다.

누구나 올바른 방향으로 나를 가리킬 수있는 아이디어가 있습니까?

아래의 방법으로 브라우저 크기를 찾았지만 약간의 문제는 있다고 생각합니다. 현재 라이브 예를 볼 수 있습니다

http://mikeheavers.com/stage/full_screen_map/

마커는 다른 것보다 더 한 방향으로 확장 할 경우 떨어져 정말 가져옵니다.

<style type="text/css"> 
     html { 

       background: url(images/antigua.jpeg) no-repeat center center fixed; 
       -webkit-background-size: cover; 
       -moz-background-size: cover; 
       -o-background-size: cover; 
       background-size: cover; 
     } 

     #infoDiv { 
      background: white; 
      padding: 20px; 
      width: 200px; 
      position:absolute; 
     } 

     #map_canvas { 
      position:absolute ; 
     } 

     .marker { 
      position:absolute; 
      left: 800px; 
      top: 400px; 
      height: 20px; 
      width: 20px; 
      background: #ff0000; 
     } 

    </style> 
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.4.4.min.js"></script> 



     <div id="infoDiv"> 

     </div> 

     <div id="markers"> 
      <div class="marker"> 
      </div> 
     </div> 

     <script type="text/javascript"> 


      $(document).ready(function() 
      { 

       var myWidth = window.innerWidth; 
       var leftVal = $("#markers").children().css('left'); 
       var leftValNumber = parseFloat(leftVal); 
       var leftRatio = leftValNumber/myWidth; 
       var leftValPos; 

       var myHeight = window.innerHeight; 
       var topVal = $("#markers").children().css('top'); 
       var topValNumber = parseFloat(topVal); 
       var topRatio = topValNumber/myHeight; 
       var topValPos; 

       var scaleRatio; 

       if (myWidth > myHeight){ 
        scaleRatio = 20/myWidth; 
       } else { 
        scaleRatio = 20/myHeight; 
       } 


       window.onresize = function() { 

        sizeMarkers(); 

       } 

       function init() 
       { 



        sizeMarkers(); 

       } 

       function sizeMarkers() 
       { 


         if(typeof(window.innerWidth) == 'number') { 
         //Non-IE 

         myWidth = window.innerWidth; 
         myHeight = window.innerHeight; 
         } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { 
         //IE 6+ in 'standards compliant mode' 
         myWidth = document.documentElement.clientWidth; 
         myHeight = document.documentElement.clientHeight; 
         } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) { 
         //IE 4 compatible 
         myWidth = document.body.clientWidth; 
         myHeight = document.body.clientHeight; 
         } 
         topVal = $("#markers").children().css('top'); 
         topValNumber = parseFloat(topVal); 
         topValPos = topRatio * myHeight; 

         leftVal = $("#markers").children().css('top'); 
         leftValNumber = parseFloat(leftVal); 
         leftValPos = leftRatio * myWidth; 

         if (myWidth < myHeight){ 
          $("#markers").children().width(myWidth*scaleRatio); 
          $("#markers").children().height(myWidth*scaleRatio); 
         } else { 
          $("#markers").children().width(myHeight*scaleRatio); 
          $("#markers").children().height(myHeight*scaleRatio); 
         } 


         $("#markers").children().css('top',topValPos); 
         $("#markers").children().css('left',leftValPos); 

         $("#infoDiv").html('Width = ' + myWidth + ' | Height = ' + myHeight + ' | Top Value: ' + topValPos + ' | Left Value: ' + leftValPos); 


       } 

       init(); 

      }); 



     </script> 

Answer 1

당신은 어떤하여 onResize 이벤트에서 같은 비율 마커 폭 및 페이지 폭을 유지하여 자바 스크립트를 사용하여 마커의 폭을 조정할 수 있습니다. 뷰포트 너비를 알려면 : http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

희망이 있습니다.