全屏缩放背景图像叠加答案

【问题标题】：Full screen scaling background image overlays全屏缩放背景图像叠加
【发布时间】：2011-05-25 01:27:25
【问题描述】：

我有一个页面，其背景图像会随着浏览器重新调整大小而缩放。我想弄清楚的是如何使蓝色标记图像缩放并保持与背景成比例的位置。例如，如果蓝色标记位于港口的顶端，当我缩小浏览器时，我希望该标记保持在港口的顶端，并随着浏览器的新尺寸成比例地缩小尺寸。

有人有什么想法可以为我指明正确的方向吗？

我使用下面的方法来查找浏览器大小，但我认为我的数学有点不对劲。您可以在此处查看实时示例：

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>

【问题讨论】：

Javascript 不是“死技术”吗？我认为 HTML5 的部分意义在于我们能够坚持使用一种通用语言。
HTML5 实际上只是一种标记语言；有一整套技术围绕着它，包括JavaScript和CSS。

标签： image html canvas fullscreen

【解决方案1】：

您可以使用 JavaScript 调整标记的宽度，方法是在任何 onresize 事件中保持相同的比例标记宽度和页面宽度。要了解您的视口宽度： http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

希望对你有帮助。

【讨论】：