码迷,mamicode.com
首页 > 其他好文 > 详细

元素全屏居中(不变形)

时间:2016-09-26 11:06:03      阅读:172      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!