<!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. (转)javascript深入理解js闭包

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  2. EF数据存贮问题二之“无法定义这两个对象之间的关系，因为它们附加到不同的 ObjectContext 对象”

    “无法定义这两个对象之间的关系,因为它们附加到不同的 ObjectContext 对象”,这是在EF中,一对多关系表,有外键的类保存至数据库中出现的错误. 我原来是用JAVA开发的,习惯性的处理一对多 ...

  3. NSString字符串类型-学习总结

    1.字符串的创建 (1)创建常量字符串 NSString *str = @"This is a String"; //str是变量名 (2)创建空的字符串,给字符串赋值 NSStr ...

  4. iOS学习笔记－CoreData

    简介 CoreData提供了对象关系映射(ORM)功能,从效果上说就是创建了一个"虚拟对象数据库",也可以把它看作一个综合的数据库管理库. NSManagedObjectConte ...

  5. 原创：2016.4.25-2016.5.1 C# informal essay and tittle_tattle

    1.Some  tips of the Time in C sharp (1) How to define the category of the "Datetime"? date ...

  6. 2、shell命令学习

    1.第一个例子 touch test.sh vim test.sh #!/bin/bash echo "hello world" chmod 755 test.sh ./test. ...

  7. hdu3714 三分

    Error Curves Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  8. zeromq源码分析笔记之无锁队列ypipe_t（3）

    在上一篇中说到了mailbox_t的底层实际上使用了管道ypipe_t来存储命令.而ypipe_t实质上是一个无锁队列,其底层使用了yqueue_t队列,ypipe_t是对yueue_t的再包装,所以 ...

  9. jquery.BannerRotator.js

    项目地址:https://github.com/snipertulip/BannerRotator 演示地址:http://snipertulip.github.io/BannerRotator/de ...

  10. php 与 jquery中$.post()与attr()方法的简单实例 amaze modal 模态窗口

    $(selector).attr(attribute,value)$.post() 在jqery中有这样一个方法,$.post()下面就这个方法做一个简单的实例: jQuery.post( url, ...