全屏缩放背景图像覆盖

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

希望它有帮助。