首页 > 其他 > 详细

元素全屏居中(不变形)

时间:2016-09-26 11:04:11      阅读:154      评论:0      收藏:0      [点我收藏+]

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

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);

 

元素全屏居中(不变形)

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!