此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. PHP 静态缓存

    今天来说说PHP页面的静态缓存. 根据个人理解,由于客户端重复的请求某个页面,导致该页面短时间内被重复请求相同的数据,导致给服务端一定的压力,同时用户访问速度也会变慢.此时如果把这个页面缓存起来,客户 ...

  2. (转)Python 日期和时间

    转自http://www.runoob.com/python/python-date-time.html Python 日期和时间 Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见 ...

  3. MySQL系列：高可用架构之MHA

    前言 从11年毕业到现在,工作也好些年头,入坑mysql也有近四年的时间,也捣鼓过像mongodb.redis.cassandra.neo4j等Nosql数据库.其实一直想写博客分享下工作上的零零碎碎 ...

  4. 灵感手环第一步——0.96寸OLED显示实验

    这算是我这个系列的第一篇博客吧.首先要解决的就是屏幕显示问题.我选择了目前新兴起的OLED显示模块. OLED(OrganicLightEmittingDiode),中文译作有机发光二极管,目前被广泛 ...

  5. 设置Eclipse的workspace路径

    首次启动Eclipse/MyEclipse时, 会弹出"Workspace Launcher"对话框, 提示设置Workspace路径. 设定好路径后, 若勾选了"Use ...

  6. 两小时搞定C#版超级战舰游戏

    课程简单介绍 游戏开发已然是眼下火星上都非常火的开发技术.而休闲的小游戏超级战舰也是眼下白领中最流行的小游戏.那超级战舰游戏是如何在两个小时高速搞定的呢?休闲类的小游戏高速开发的指南是什么?C#是如何 ...

  7. Error code:1728 Cannot load from mysql.proc. The table is probably corrupted

    Error code:1728 Cannot load from mysql.proc. The table is probably corrupted http://bugs.mysql.com/b ...

  8. 01_GIT基础、安装

     1 为什么选择GIT 分布式,强调个体 公共server压力和数据量都不会太大 速度快.灵活 随意两个开发人员之间能够非常easy的解决冲突 离线工作 每日工作备份 能够吃懊悔药 2  GIT基 ...

  9. spring框架整合springMVC时关于AOP无法切入的问题

    最开始springMVC的配置为: spring的配置为: 分析可知道spring的配置正确,由于在springmvc中已经扫描了@Controller相关的注解,所以就不需要再次扫描了,由于spri ...

  10. Array的基本操作

    准备饿补基础技术,先来个数组的总结. 1 .合并操作    concat :   var C = A.concat(B);    用A数组合并B数组,生成新的C数组.      循环插入        ...