关于CSS设置背景图的缩放问题

        设计思路是这样的：自定义几张不同尺寸的PC端背景图片，然后根据不同的移动设备类型，展示这些背景图

        看了下CSS入门教程，就给了几个属性的设置啥的，感觉木啥用，只好找找度娘。

        操作步骤：

        No1：自定义一个HTML页面，用来展示效果，这个木有疑问，我是放在本地某个项目跟目录，方便访问操作；

        No2：head部分添加语句如下：   

        <meta name="viewport" content="width=device-width,initial-scale=1.0">

            该语句主要作用是让当前viewport的宽度等于设备的宽度，并不允许用户手动缩放，保证不会出现横向滚动条；

        No3：因为有多张图片，想展示的话考虑用JS来控制背景图片，所以需要引入个通用的

        <script src="/js/jquery-2.1.4.js"></script>

            注意引用路径，具体使用思路是用个数组存储图片src路径，然后可随机，可循环展示图片，代码就不贴了，类似JS代码一抓一大把。

        No4：由于样式啥的比较简单，就不引用外部css文件了，直接在页面上定义：

            <style>
   

                html {height: 100%}

          body{
            background:no-repeat;
            background-size:100% 100%;
          }

            </style>

            设置html的height:100%，就可以获取浏览器的宽高了，后面的body和div也就有了依赖，可以通过百分比定位

            background-size设置图片100% 100%你一定能看到整张图片内容，但是会被挤压变形，其他设置方式如cover啥的自行测试下咯，找了种JS控制的方式，代码如下：

        function AutoSize(ImgUrl, maxWidth, maxHeight){
            var oImg = new Image();
            oImg.src = ImgUrl;//原始图片地址（用于获取原始图片的真实宽高）
            oImg.onload = function(){
                //当图片比图片框小时不做任何改变
                if(oImg.width < maxWidth && oImg.height < maxHeight){
                    Uwidth = oImg.width;
                    Uheight = oImg.height;
                }else{
                    if(maxWidth/maxHeight <= oImg.width/oImg.height)//原图片宽高比例大于图片框宽高比
                    {
                        Uwidth = maxWidth;
                        Uheight = maxWidth*(oImg.height/oImg.width);
                    }else{//原图片宽高比例小于图片框宽高比
                        Uwidth = maxHeight *(oImg.width / oImg.height);
                        Uheight = maxHeight;
                    }
                }
            }
        }
        
        参数说明：ImgUrl(当前图片URL地址)
             maxWidth(当前设备显示宽度 $(document).width())
             maxHeight(当前设备显示高度 $(document).height())