此js一般用于控制图片铺满盒子，但是比例不变，并且绝对局中
原理：判断图片的高宽与盒子高宽的大小的关系，然后通过比例来控制图片的缩放及定位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

#img{ width:600px; height:400px; position:relative; overflow:hidden; background:#996699;}

</style>

</head>

<body>

<div id="img"><img src="data:images/test_01.png" onload="resize_img(this,600,400)" /></div>

</body>

</html>

<script type="text/javascript">

function resize_img(pic,w,h){//参数

 var re_new_size=function(r){

 //根据比率重新计算宽度

  return {w:pic.width/r,h:pic.height/r};

  };

 var re_offset=function(n){

 //根据新的宽高度返回偏移量

  return {off_l:(n.w-w)*0.5,off_t:(n.h-h)*0.5};

  };

 var re_position=function(o,n){

 //重新定位图片

  pic.style.cssText="position:absolute;top:"+-o.off_t+"px;left:"+-o.off_l+"px;width:"+n.w+"px;height:"+n.h+"px;";

  };

 var execute=function(rate){//总执行函数

  var new_size=re_new_size(rate),

    offset_new=re_offset(new_size);

  re_position(offset_new,new_size);

  };

  //判断变量

 var rate_of_w=pic.width/w,

   rate_of_h=pic.height/h,

   rate;

 if(rate_of_w>=1){

 //图片宽度大于显示区域宽度

    if(rate_of_h>=1){

    //且图片高度大于显示区域高度

    rate=Math.min(rate_of_w,rate_of_h);

    }else{

    //图片高度小于显示区域

     rate=pic.height/h;

     }

 }else{

 //图片宽度小于显示区域宽度

    if(rate_of_h>=1){

    //且图片高度大于显示区域高度

     rate=pic.width/w;

    }else{

    //图片高度小于显示区域高度

     rate=Math.min(rate_of_w,rate_of_h);

     }

   }

 execute(rate);

 //执行入口

 }

</script>

js控制图片自动缩放，实现铺满盒子，不变形，完全局中的更多相关文章

  1. js 控制图片大小核心讲解

    控制图片大小的方法有很多,在本文将为大家详细介绍下使用js实现缩放图片,核心代码如下,感兴趣的朋友可以参考下 缩放图片脚本分享 <!DOCTYPE HTML PUBLIC "-//W3 ...

  2. [css或js控制图片自适应]

    [css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...

  3. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  4. java实现图片和pdf添加铺满文字水印

    依赖jar包 <!-- pdf start --> <dependency> <groupId>com.itextpdf</groupId> <a ...

  5. Qt5：随窗口大小变化背景图片自动缩放的实现

    在窗口程序中,当我们改变窗口大小的时候,背景图片通常会岁窗口大小变化而缩放 然而,在我们写的窗口程序中,设置背景图片后,如果缩放大小,会看到背景图片并不会随之缩放, 应为这需要特殊处理,一般常用的方法 ...

  6. arcgis for js 根据多边形自动缩放

    交代背景:多边形已经渲染在图层上,然后根据多边形自动缩放值合适的大小: 思路:获取图层信息,获取图层中的几何信息,获取图形范围信息,在地图上设置范围:(下面的方法有封装)记一下思路就好 var pol ...

  7. .js控制一次加载一张图片，加载完后再加载下一张

    js怎么控制一次加载一张图片,加载完后再加载下一张 (1)方法1 (1)方法2

  8. js控制图片缩放、水平和垂直方向居中对齐

    已測试兼容 IE6,IE7,IE8,火狐FF,谷歌chrome. 这里使用了jquery插件,假设你不使用jquery,略微改造一下也非常快. 网上查了些资料,用css控制兼容性不好,看去非常揪心.于 ...

  9. JS控制图片显示的大小（图片等比例缩放）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. ##2.基础服务(SQl,RabbitMQ)-- openstack pike

    2-基础服务(SQl,RabbitMQ) openstack pike 安装 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html ##.基础服务(Mysql ...

  2. TFS2017持续发布中调用PowerShell启停远程应用程序

    目前团队项目中有多个Web.服务以及与大数据平台对接接口等应用,每次的发布和部署采用手工的方式进行.停止应用程序,拷贝发布包,启动应用程序,不停的循环着,并且时不时地会出现一些人为错误性问题.这种模式 ...

  3. CSS书写规范与理论

    前端体系的变化可谓是日新月异,短短一年时间,从理论.框架.构建工具.甚至开发语言都发生非常大的变化. 随着新项目就即将启动,我抽时间回顾了一下以往项目的前端架构,零零散散产生了许多想法,尽量一一记录下 ...

  4. Netty4 学习笔记之二:客户端与服务端心跳 demo

    前言 在上一篇Netty demo 中,了解了Netty中的客户端和服务端之间的通信.这篇则介绍Netty中的心跳. 之前在Mina 中心跳的使用是通过继承 KeepAliveMessageFacto ...

  5. Linux基础学习笔记以及常用命令

    1.windows自带命令进入mysql所在磁盘   2.进入mysql安装目录的bin文件 D:\>cd D:\Program Files (x86)\mysql-5.5.25-winx64\ ...

  6. ubuntu16.04 Qt5.8 如何使用opecv3.2

    关于opencv3.2的编译有一大堆教程.可自寻查看.在Qt中使用opencv需要在pro文件中添加 相应的头文件和 动态链接库.如下 INCLUDEPATH += . INCLUDEPATH += ...

  7. MySQL数据库数据信息迁移

    环境内核信息: [root@zabbix-01 ~]# uname -a Linux lodboyedu-01 2.6.32-696.el6.x86_64 #1 SMP Tue Mar 21 19:2 ...

  8. Spark Shuffle模块——Suffle Read过程分析

    在阅读本文之前.请先阅读Spark Sort Based Shuffle内存分析 Spark Shuffle Read调用栈例如以下: 1. org.apache.spark.rdd.Shuffled ...

  9. A. Arrays(Codeforces Round #317 水题)

    A. Arrays time limit per test 2 seconds memory limit per test 256 megabytes input standard input out ...

  10. 关于flask登录视图报错AttributeError: '_AppCtxGlobals' object has no attribute 'user'

    在一个小程序中写了一个登录视图函数,代码如下: @app.route('/login',methods = ['GET','POST']) @oid.loginhandler def login(): ...