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

希望它有所帮助。

全屏缩放背景图像叠加

1 个答案: