对于div里面内容过大根据长度或者宽度进行适配，然后可以滚轮缩放的功能

在做3000的项目中，因为页面的svg很大，但是做的只是适配电脑，打开肯定是看不全的，要看全就必须进行滚动，可是客户提出了将页面放在电视机上面，用电视输入网址直接访问，这样问题就来了，电视上怎么进行滚动呢

所以新增需求

1、页面根据不同尺寸的设置进行适配

2、确保页面内容可以全部查看完整

3、可以进行滚轮滚动缩放

实例

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
    html,body{
        width:100%;
        height:100%;
        overflow:hidden;
        padding:0;
        margin:0;
    }
    #big{
        overflow:auto;
        width:100%;
        height:100%
    }
    #content{
        width:3000px;
        height:2000px;
        background-color:pink;
        display:flex;
        justify-content:center;
        align-items:center;
        transform-origin:0 0;
    }
    #content>span{
        display:flex;
        justify-content:center;
        align-items:center;
        width:500px;
        height:500px;
        color:white;
        background: rgba(0,0,0,0.5);
    }
  </style>
 </head>
 <body>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>        
    <script type="text/javascript">
        window.onload=function(){
            initEvent()
            //计算是宽度优先的还是高度优先的
            initScale()
        }
        function initScale(){
            var initScale = 1;
            if($(window).width()/$("#content").width()<$(window).height()/$("#content").height()){
                initScale=$(window).width()/$("#content").width();
            }else{
                initScale=$(window).height()/$("#content").height();
            }
            console.log(initScale)
            $("#content").css("transform","scale("+initScale+")")    
        }
        function initEvent(){
            //滚轮效果
            var params={}
            $('body').on('mousewheel',function(e){
                params.zoomVal+=event.wheelDelta/1200;
                var o=e.target;
                if (params.zoomVal >= 0.2) {
                    $("#content").css("transform","scale("+params.zoomVal+")")    
                } else {
                    params.zoomVal=0.2;//不让其一直无限缩小
                    $("#content").css("transform","scale("+params.zoomVal+")")    
                    return false;
                }
            })
            $(window).on("resize",function(){
                initScale()
            })
        }
    </script>
    <div id="big">
        <div id="content" class="big-image">
            <span>测试根据屏幕尺寸进行缩放div</span>
        </div>
    </div>
 </body>
</html>

效果图

来源：https://www.cnblogs.com/pengfei25/p/11676754.html

标签

div

content