元素全屏居中（不变形）

最新推荐文章于 2020-08-18 10:16:14 发布

weixin_33843947

最新推荐文章于 2020-08-18 10:16:14 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gongshunkai/p/5908096.html

窗口宽度大于高度，元素高度撑满窗口，宽度等比例缩放
窗口高度大于宽度，元素宽度撑满窗口，高度等比例缩放

resize有3个参数：

elem : 目标元素
w : 元素宽度
h : 元素高度

var resize = function(elem,w,h){
    var dw = w,
        dh = h,
        cw = $(window).width(),
        ch = $(window).height();

    var bw = cw > dw ? cw / dw : 1 / (dw / cw),
        bh = ch > dh ? ch / dh : 1 / (dh / ch);

    var w = Math.min(dw*bh,cw),
        h = Math.min(dh*bw,ch);

    elem.css({
        'width':w,
        'height':h,
        'top':ch*0.5 - h*0.5,
        'left':cw*0.5 - w*0.5,
        'position':'absolute'
    });
};


//调用
resize($('.main'),1008,640);