Mise à l'échelle en plein écran Mise en page d'image de fond superposée

Question

J'ai une page dont l'image d'arrière-plan est mise à l'échelle lors de la redimensionnement du navigateur. Ce que j'essaie de comprendre, c'est comment rendre l'échelle du marqueur bleu et maintenir la position proportionnellement à l'arrière-plan. Par exemple, si le marqueur bleu se trouvait sur la pointe du port, alors que je réduisais le navigateur, je voudrais que ce marqueur reste sur la pointe du port et rétrécisse proportionnellement aux nouvelles dimensions du navigateur.

Quelqu'un at-il des idées qui me dirigeront dans la bonne direction?

J'ai utilisé la méthode ci-dessous pour trouver la taille du navigateur, mais je pense que mes calculs sont un peu moins. Vous pouvez voir l'exemple en direct ici:

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

Le marqueur devient vraiment hors si vous l'échelle dans un sens plus que l'autre.

<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

Vous pouvez régler la largeur de votre marqueur en utilisant JavaScript en gardant à tout événement onResize le même rapport marqueur largeur et largeur d'une page. Pour connaître la largeur de votre fenêtre: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

Espérons que cela aide.