元素全屏居中(不变形)

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

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);
时间: 2024-11-06 19:34:58

元素全屏居中(不变形)的相关文章

DOM元素全屏显示解决方案(续)

前一篇中实现element全屏方案只适合单一的元素(元素里面不包含其他元素),但是如果里面有其他的元素呢?比如按钮之类的.如下图: 加上-webkit-full-screen{ width: 100%; height: 100%; } 之后全屏显示就变成: 1,button使用left和top来定位(左图).如果用bottom和right来定位(右图) 我们会发现element在全屏模式下尺寸和screen一样大了,但是element里面的子元素尺寸和位置设定还是原先的,这就为什么会出现上述情况

DOM元素全屏显示解决方案

<script type="text/javascript"> function goFullscreen(id) { // Get the element that we want to take into fullscreen mode var element = document.getElementById(id); // These function will not exist in the browsers that don't support fullscr

jquery 图片比例不变,全屏居中

<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>图片中心点全屏缩放代码</title> <script type="text/javascript" src="http://i1.sinaimg.cn/jslib/jquery-1.4.2.min.js"></script> &l

元素全屏的设置与监听

作者网站:http://hawkzz.com 设置全屏和退出全屏 //全屏设置 $('#fullScreen').on('click', function () { fullScreen(); }); //退出全屏 $('#exitFullScreen').on('click', function () { exitFullScreen(); }); //进入全屏 function fullScreen() { var obj = document.getElementById('editMar

用CSS3 vh 简单实现DIV全屏居中

vh.vw.vmin.vmax介绍 vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)vh:视窗高度的百分比vmin:当前 vw 和 vh 中较小的一个值vmax:当前 vw 和 vh 中较大的一个值 浏览器兼容性 (1)桌面 PC Chrome:自 26 版起就完美支持(2013年2月)Firefox:自 19 版起就完美支持(2013年1月)Safari:自 6.1 版起就完美支持(2013年10月)Opera:自 15 版起就完美支持(2013年7月)IE:自 IE10 起(包括 E

JQ全屏居中轮播图代码

<style> .clearfloat:after{ display: block; clear: both; content: ""; visibility: hidden; height: 0; } .clearfloat{ zoom: 1; } /*轮播图*/ .banners { position: relative; width: 100%;height:542px} .banner-img { position: relative; float: left; w

css如何将div实现全屏水平垂直居中

css如何将div实现全屏水平垂直居中:本章节介绍一下如何将一个div元素在整个网页内实现水平垂直居中效果,代码是最有说服力的,直接看代码.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title

html5实现全屏的api方法

参考地址 [进入和退出全屏] // Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); document.webkitCancelFullScreen(); // Firefox 10 element.mozRequestFullScreen(); document.mozCancelFullScreen(); // W3C 提议 element.requestFullscreen(); doc

Fullscreen API 全屏显示网页

第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性.因为尚未发布正式版的标准,所以必须使用浏览器特定的方法,也就是应用添加前缀(webit/moz)的方法. 这个 API 不仅能够使整个页面全屏显示,也可以使页面中的某个元素全屏显示.它的设计初衷是为了全屏显示 HTML5 视频和游戏,以便更全面的替代 flash 功能.尽管还有很多有待完善的地方,