全屏縮放背景圖像覆蓋

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

你可以調整使用JavaScript通過在任何事件的onResize保持相同比例的標記寬度和頁面寬度的標記的寬度。 要知道您的視口寬度： http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

希望它有幫助。