此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. 友元函数 C++

    #include<iostream> #include<vector> using namespace std; class Text{ public: Text():a(){ ...

  2. Python 串口通信操作

    下载  pyserial包 https://pypi.python.org/packages/source/p/pyserial/pyserial-2.7.tar.gz#md5=794506184df ...

  3. QT之TCP通信

    QT中可以通过TCP协议让服务器和客户端之间行通信.所以下面我就围绕服务器和客户端来写. 这是我么写服务器和客户端的具体流程: A.服务器: 1.创建QTcpServer对象         2.启动 ...

  4. mysql索引优化面试题

    曾经偷偷的面试了两个单位,都提到了Mysql的优化问题,所以以后要多多学习数据库的优化知识了.建设数据库的优化大概主要就是索引的优化了吧,因为我们不可能修改数据结构的情况下,提高数据库的查询效率似乎也 ...

  5. SQL Server Profiler的使用

    最近一个项目,使用微软的Entity Framework的ORM框架的项目,部署到现场后,出现了系统缓慢,多个客户端的内存溢出崩溃的问题. 打开了SQL Server Profiler排查,发现有全表 ...

  6. BigDecimal工具类处理精度计算

    /** * Created by My_coder on 2017-07-27. * 加减乘除计算工具类 */ public class BigDecimalUtil { private BigDec ...

  7. 【NOIP2003提高组】加分二叉树

    https://www.luogu.org/problem/show?pid=1040 令f(i,j)表示[i,j]的二叉树中最高的分数.枚举k为根,状转方程:f(i,j)=max{f(i,k-1)* ...

  8. Windows下安装solr步骤详解

    Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通过Http Get操 ...

  9. 毕达哥拉斯树(pythagorasTree)原理解析及canvas动画实现

    以前就看到了这个东西,由于太忙了最近才有时间来实现这个; 该文章适合有一定 canvas 基础的人阅读; 首先说说他的原理: The construction of the Pythagoras tr ...

  10. java 类加载机制总结

    Java程序的运行,离不开class的加载,所谓类加载就是将编译好的class文件加载的jvm并形成class对象,只有class正确加载才能被实例化和调用. public class test { ...