<!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. PixelFormat 枚举

    成员名称 说明 Alpha 像素数据包含没有进行过自左乘的 alpha 值. Canonical 默认像素格式,每像素 32 位. 此格式指定 24 位颜色深度和一个 8 位 alpha 通道. Do ...

  2. oracle包详解（二）【weber出品】

    一.重载子程序 PL/SQL中的重载功能: 1. 能够使用户创建两个或多个同名的子程序 2. 要求子程序的形式参数的数量,顺序或者数据类型不一样 3. 能够使用户使用不同的数据灵活的调用子程序 4. ...

  3. IOS中对于一些控件的抖动效果

    这两天在网上看到一个帖子讨论关于有些app 输入账密时候 错误的话会有抖动效果出现,然后自己琢磨了下如何实现,下面上代码!!! 首先 写一个UIView的分类 #import <UIKit/UI ...

  4. OD调试9—实例：深入分析代码完成软件破解

    OD调试9—实例:深入分析代码完成软件破解  爆破,是最初级的解决方案,不到万不得已,我们不直接修改JNZ通关.因为这样子的话,我们就享受不到破解.逆向的真正乐趣了. 了解程序背后按照剧情发展经常会出 ...

  5. QT5-控件-QComboBox

    #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QComboBox> cl ...

  6. No2_5.类的高级特性_Java学习笔记_抽象类和成员内部类

    一.抽象类1.所谓抽象类,只声明方法的存在而不去实现它的类:2.抽象类不能被实例化,即不能实现其对象:3.abstract class 类名{ 类体 }4.包含一个或多个抽象方法的类必须声明成抽象类: ...

  7. 影响MySQL性能的五大配置参数

    我们今天主要和大家分享的是对MySQL性能影响关系紧密的五大配置参数,以下就是文章的具体内容描述,希望会给你带来一些帮助在此方面. 以下的文章主要是对MySQL性能影响关系紧密的五大配置参数的介绍,我 ...

  8. NoSql中的B-tree、B+tree和LSM-tree

    总结: 1.B+树将数据完全排序,读数据时很快,但当要修改数据时,就需要将新入数据下面的数据重新排位,特别是当写入的数据排在较高的位置时,需要大量的移位操作才能完成写入. 2.SLM牺牲部分的读性能, ...

  9. Form 表单常用正则验证 （收藏）

    1.^\d+$ //匹配非负整数(正整数 + 0) 2.^[0-9]*[1-9][0-9]*$ //匹配正整数 3.^((-\d+)|(0+))$ //匹配非正整数(负整数 + 0) 4.^-[0-9 ...

  10. jquery 获取多个dom对象的方法

    $("[name=trade]").each(function(){ for(j=0;j<info.trade.length;j++){ if( $(this).val() ...