此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. WebApi接收复杂类型参数

    当接收实体时,该实体类不能添加Serializable属性,否则传来的json数据无法映射成功?

  2. 35.Linux-分析并制作环形缓冲区

    在上章34.Linux-printk分析.使用printk调试驱动里讲述了: printk()会将打印信息存在内核的环形缓冲区log_buf[]里, 可以通过dmesg命令来查看log_buf[] 1 ...

  3. mysql 各数据类型的 大小及长度

    数字型 类型 大小 范围(有符号) 范围(无符号) 用途 TINYINT 1 字节 (-128,127) (0,255) 小整数值 SMALLINT 2 字节 (-32 768,32 767) (0, ...

  4. UITableView使用过程中可能遇到的问题

    前言:记录一些UITableView使用过程中可能遇到的问题 环境:Xcode9 解决UITableViewStyleGrouped类型的TableView的cell距离顶部有距离的问题: table ...

  5. window.setInterval与window.setTimeout使用实例

    <script type="text/javascript"> var arrived = false; var num = 0; var timer = window ...

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

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

  7. Scheme -- Hierarchical Structures

    Question: produce a deep-reverse procedure that takes a list as argument  and returns as its value t ...

  8. POJ 2482 Stars in Your Window（线段树）

    POJ 2482 Stars in Your Window 题目链接 题意:给定一些星星,每一个星星都有一个亮度.如今要用w * h的矩形去框星星,问最大能框的亮度是多少 思路:转化为扫描线的问题,每 ...

  9. 怎样解决jsp:include标签在包括html文件时遇到的乱码问题

    在一个JSP页面中,经常须要包括还有一个文件,JSP为我们提供了jsp:include标签能够完毕这个功能,比方:<jsp:include page="some.jsp"&g ...

  10. SDL2源码分析2：窗体（SDL_Window）

    ===================================================== SDL源码分析系列文章列表: SDL2源码分析1:初始化(SDL_Init()) SDL2源 ...