<!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>

<style>

body {padding:0; margin:0;}

#coverpage{ width: 100%; height: 100%; z-index: 9999; background: #000; overflow: hidden; position: absolute;}

#onepics{ width: 100%; height: 100%; overflow: hidden; position: relative;}

.onepic_wrap{ width: 100%; height: 100%; overflow: hidden; display: block; position: relative; cursor: pointer;}

.onepic_bg{ position: absolute; left: 0; bottom: 0; height: 45px;width: 100%;color:#fff;background:rgba(0,0,0, 0.5); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7f000000', EndColorStr='#7f000000');*zoom:1;}

:root .onepic_bg{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000'); }

.onepic_bg p{ height: 45px; line-height: 45px; padding-left: 95px; font-size: 13px; color: #fff; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}

</style>

</head>

<body>

<!-- cover begin -->

<div id="coverpage">

  <div id="onepics"><div class="onepic_wrap"><img src="data:images/header.png" class="wrap_pic"></div></div>

  <!-- 文字介绍 start -->

  <div class="onepic_bg">

    <p id="onepic_sum">居民被迫撤离，主要州际高速路关闭。摄影：Darvi</p>

  </div>

  <!-- 文字介绍 end -->

</div>

<script type="text/javascript">

      var win_height; //浏览器当前窗口可视区域高度

      var win_width; //浏览器当前窗口可视区域宽度

      var original_width = 2100; //图片原始尺寸，编辑可手填

      var original_height = 1000; //图片原始尺寸，编辑可手填

      var pic_width, pic_height, pic_left ,pic_top; //裁剪适配后的图片显示尺寸和左边距、上边距

	  OnePicAction();

      function OnePicAction(){

          win_height = $(window).height(); //浏览器当前窗口可视区域高度

          win_width = $(window).width(); //浏览器当前窗口可视区域宽度

          //裁剪图片

          if(Math.ceil(win_height * original_width / original_height) < win_width ){

              pic_width = win_width ;

              pic_height = Math.ceil(win_width * original_height / original_width);

              pic_left = 0;

              pic_top = - Math.ceil((pic_height - win_height) / 2);

          }else{

              pic_height = win_height;

              pic_width = Math.ceil(win_height * original_width / original_height);

              pic_left = - Math.ceil((pic_width - win_width) / 2);

              pic_top = 0;

          }

          $("#onepics .wrap_pic").css("width",pic_width+"px").css("height",pic_height+"px").css("margin-top",pic_top+"px").css("margin-left",pic_left+"px");

      }

	  //浏览器大小变化时壹图处理

	  window.onresize = function(){

		  OnePicAction();

	  }

</script>

</body>

<html>

jquery我单独拿出来吧

<script type="text/javascript">

      var win_height; //浏览器当前窗口可视区域高度

      var win_width; //浏览器当前窗口可视区域宽度

      var original_width = 2100; //图片原始尺寸，编辑可手填

      var original_height = 1000; //图片原始尺寸，编辑可手填

      var pic_width, pic_height, pic_left ,pic_top; //裁剪适配后的图片显示尺寸和左边距、上边距

	  OnePicAction();

      function OnePicAction(){

          win_height = $(window).height(); //浏览器当前窗口可视区域高度

          win_width = $(window).width(); //浏览器当前窗口可视区域宽度

          //裁剪图片

          if(Math.ceil(win_height * original_width / original_height) < win_width ){

              pic_width = win_width ;

              pic_height = Math.ceil(win_width * original_height / original_width);

              pic_left = 0;

              pic_top = - Math.ceil((pic_height - win_height) / 2);

          }else{

              pic_height = win_height;

              pic_width = Math.ceil(win_height * original_width / original_height);

              pic_left = - Math.ceil((pic_width - win_width) / 2);

              pic_top = 0;

          }

          $("#onepics .wrap_pic").css("width",pic_width+"px").css("height",pic_height+"px").css("margin-top",pic_top+"px").css("margin-left",pic_left+"px");

      }

	  //浏览器大小变化时壹图处理

	  window.onresize = function(){

		  OnePicAction();

	  }

</script>

最后是我自己写的，有类似，但是判断条件有不同，还有，如果自己没定原始参数，而是通过js获取图片宽度，就可能出现问题，图片只是按比例显示，但是不全屏

<script>

	function fullScreen(pic,p_w,p_h){

		var f_w,f_h;//全屏图片尺寸

        var w_h = $(window).height();

        var w_w  = $(window).width();

        var $this = $(pic);

        // var p_w = $this.width();//这个没用？？？？？？？？？？？？？？？？

        // var p_h =$this.height();

        if(p_w < p_h){//如果图片高度大于宽度

            f_w = w_w;

            f_h = Math.ceil(p_h / p_w * w_h);

            f_ml = 0;

            f_mt = -(f_h-w_h)/2;

            $this.css({'width':f_w+'px','height':f_h+'px','margin-top':f_mt+'px','margin-left':f_ml+'px'})

        }else{ //宽度大于高度

        	f_h = w_h;//因为图片宽度比高度值大，所以就以屏幕的高度为基准，屏幕的宽度就是图片的高度

            f_w = Math.ceil(p_w / p_h * f_h);//p_w/p_h就是图片的宽高比例，当确定了图片的高度的时候，就可以通过宽高比例来确定全屏后的图片宽度

            f_mt = 0;//图片的上边距

            f_ml = -(f_w-w_w)/2;//图片全屏后的宽度超过屏幕的宽度除以2，就是所需往左偏移的距离

            $this.css({'width':f_w+'px','height':f_h+'px','margin-top':f_mt+'px','margin-left':f_ml+'px'})

        }

	}

	fullScreen('#onepics .wrap_pic',1920,760);

	window.onresize = function(){

		fullScreen('#onepics .wrap_pic ')

	}

</script>

　　

jquery 图片比例不变，全屏居中的更多相关文章

  1. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  2. 全新jquery多点滑动幻灯片——全屏动画animateSlide

    首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把h ...

  3. jQuery鼠标滚动垂直全屏切换代码

    体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...

  4. 使用CSS3实现响应式标题全屏居中和站点前端性能

    要实现标题全屏居中(同一时候在垂直和水平方向居中).有若干种方法,包含使用弹性布局.表格单元.绝对定位和自己主动外边距等. 全屏居中 当中眼下比較流行也比較easy理解的方法是使用绝对定位+偏移实现. ...

  5. MyEclipse9中的不伤眼修改、FreeMarker插件、JQuery提示插件、全屏(FullScreen)插件的安装

    ============下载相关附件===================== http://files.cnblogs.com/fhtwins/eclipse-fullscreen_1.0.7.zi ...

  6. jQuery支持mobile的全屏水平横向翻页效果

    这是一款支持移动手机mobile设备的jQuery全屏水平横向翻页效果插件. 该翻页插件能够使页面在水平方向上左右全屏翻动,它支持手机触摸屏,支持使用鼠标滚动页面. 整个页面过渡平滑,效果很不错. 在 ...

  7. 设置ImageView显示的图片铺满全屏

    转自:http://m.blog.csdn.net/blog/wjwj1203/32334459   为适应不同屏幕的手机,ImageView显示的图片可能不铺满屏幕,如果定高的话,两边可能会出现空白 ...

  8. jquery动态背景切换全屏登录插件supersized.js

    下载地址:https://download.csdn.net/download/t101lian/10434198预览: http://www.daimabiji.com/codedemo/1530 ...

  9. IOS中实现图片点击全屏预览

    //// ViewController.m// XWZoomImageView//// Created by xiao on 15/11/13.// Copyright © 2015年 xiao. A ...

随机推荐

  1. 45个非常有用的 Oracle 查询语句小结

    45个非常有用的 Oracle 查询语句小结 这里我们介绍的是 40+ 个非常有用的 Oracle 查询语句,主要涵盖了日期操作,获取服务器信息,获取执行状态,计算数据库大小等等方面的查询.这些是所有 ...

  2. Link all references for a local rename (does not change references in other files)

    这是一个十分easy的问题 错误原因  : import  Android.R; 把这句话去掉 ctrl + shift+o  引进一个  项目对应的R文件 R存在于gen文件夹下 可以找到 layo ...

  3. ANSI与UINCODE编码

    简要说明: ANSI是一种字符代码,为使计算机支持更多语言,通常使用 0x80~0xFF 范围的 2 个字节来表示 1 个字符. Uincode(统一码.万国码.单一码)是计算机科学领域里的一项业界标 ...

  4. 关于毕设WiFi选型

    毕设做基于WiFi的家庭灯光影音控制,现在主要是WiFi模块上的选型,自己选了ESP8266. 一开始是看到了机智云的内容,想尝试机智云.但是目前没有母版,不知道怎么下手. 接下来就先尝试通过通用类型 ...

  5. Oracle11g R2学习系列 之九 PL/SQL语言

    这是个重头戏,如果精通了PL/SQL,毫不夸张的说明精通了Oracle了.PL/SQL由以下三个部分组成(Definition,Manipulation,Control): DDL:数据定义语言,Cr ...

  6. mac qq截图功能失效后，如何重启截图功能？

    在finder中打开应用程序目录,找到QQ,右键单击QQ,选择显示包内容,此时会打开一个文件夹. 进入以下路径Library/LoginItems然后双击ScreenCapture这个进程,截图功能即 ...

  7. Server2008R2:由于没有远程桌面授权服务器可以提供许可证，.....错误的解决 ---设计师零张

    一直使用远程桌面连接一台windows2008server服务器,今天突然报错,连不上了:   “由于没有远程桌面授权服务器可以提供许可证,远程会话被中断.请跟服务器管理员联系.”       由于是 ...

  8. [Codeforces Round #186 (Div. 2)] B. Ilya and Queries

    B. Ilya and Queries time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  9. DJANGO学习一则

    这个WEB框架,可以好好研究,相信很快就会用在工作上的. 相关文件: settings.py """ Django settings for djangoweb proj ...

  10. hdu 1853 最小费用流好题 环的问题

    Cyclic Tour Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/65535 K (Java/Others) Tota ...