js等比例缩放图片，这个功能非常实用，当网页加载一个尺寸比较大的图片时，往往会把一个网页撑的变形，页面变得很难看，于是我们就想到了用JS去控制超出一定范围的图片，以稳定页面布局，本代码段就是完成了此功能，而且代码非常简洁，效果很好。

  1. <html>
  2. <head>
  3. <title>等比例缩放图片</title>
  4. <script>
  5. function DrawImage(ImgD,iwidth,iheight){
  6.     //参数(图片,允许的宽度,允许的高度)
  7.     var image=new Image();
  8.     image.src=ImgD.src;
  9.     if(image.width>0 && image.height>0){
  10.       if(image.width/image.height>= iwidth/iheight){
  11.           if(image.width>iwidth){
  12.               ImgD.width=iwidth;
  13.               ImgD.height=(image.height*iwidth)/image.width;
  14.           }else{
  15.               ImgD.width=image.width;
  16.               ImgD.height=image.height;
  17.           }
  18.       }else{
  19.           if(image.height>iheight){
  20.               ImgD.height=iheight;
  21.               ImgD.width=(image.width*iheight)/image.height;
  22.           }else{
  23.               ImgD.width=image.width;
  24.               ImgD.height=image.height;
  25.           }
  26.       }
  27.     }
  28. }
  29. </script>
  30. </head>
  31. <body>
  32. <img src="http://avatar.csdn.net/9/9/5/1_qiaqia609.jpg" alt="自动缩放后的效果" width="100" height="100" onload="javascript:DrawImage(this,80,80)" />
  33. </body>
  34. </html>

JavaScript等比例缩放图片的更多相关文章

  1. JS实现等比例缩放图片

    JS实现等比例缩放图片 2014-01-19 21:57 by 龙恩0707, 40 阅读, 0 评论, 收藏, 编辑 JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局, ...

  2. JS等比例缩放图片,限定最大宽度和最大高度

    JS等比例缩放图片,限定最大宽度和最大高度 JavaScript //图片按比例缩放 var flag=false; function DrawImage(ImgD,iwidth,iheight){ ...

  3. PHP按最大宽高等比例缩放图片类

    本来用phpthumb来缩略图片是十分方便的,但是最近在sae上写项目发现phpthumb在sae上保存文件时会出问题,想来实现一个简单的按最大宽高等比例缩放图片类也并不困难,于是便自己写了一个方便修 ...

  4. PHP按最大宽高等比例缩放图片类 http://www.oschina.net/code/snippet_876708_21113

    PHP按最大宽高等比例缩放图片类 http://www.oschina.net/code/snippet_876708_21113 php 等比例缩小图片 http://www.111cn.net/p ...

  5. 【Thumbnailator】java 使用Thumbnailator实现等比例缩放图片，旋转图片等【转载】

    Thumbnailator概述:     Thumbnailator是与Java界面流畅的缩略图生成库.它简化了通过提供一个API允许精细的缩略图生成调整生产从现有的图像文件的缩略图和图像对象的过程, ...

  6. C#等比例缩放图片

    等比例缩放图片(C#) private Bitmap ZoomImage(Bitmap bitmap, int destHeight, int destWidth) { try { System.Dr ...

  7. DTCMS，添加文章时，内容中第一张图片作缩略图，并且等比例缩放图片

    DTCMS,添加文章时,内容中第一张图片作缩略图 admin/article/article_edit.aspx.cs 导入: using System.Drawing;using System.Dr ...

  8. [Xcode 实际操作]六、媒体与动画-(1)使用图形上下文按一定比例缩放图片

    目录:[Swift]Xcode实际操作 本文将演示如何通过图形上下文,来实现图片缩放的功能. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKi ...

  9. Android 等比例缩放图片

    // 缩放图片 public static Bitmap zoomImg(String img, int newWidth ,int newHeight){ // 图片源 Bitmap bm = Bi ...

随机推荐

  1. js日期操作

    1.最基本的日期操作 var mydate = new Date(); set/get   FullYear,Month,Date,Hour,Minutes,Second可以随意拼接 toLocale ...

  2. blog_导航

    blog导航 在左下侧:随笔分类   简要做个导航图放到这儿方便大家查阅 直奔爬虫:   点击->      直奔oracle:点击-> 

  3. jquery 元素控制(附加元素/其他内容)引进和应用

    一个.在内部元素/外部附加元件 append,prepend:加入到该子元素  before,after:元素加入 html: <div id="content"> 在 ...

  4. oracle_常用命令（表空间查询）

    ---查询表空间 对应的物理文件,名称 ,大小 ,已用的,利用率 SELECT B.FILE_NAME "FILE_NAME", B.TABLESPACE_NAME "T ...

  5. keil程序在外部RAM中调试的问题总结（个人的一点经验总结）

    keil程序在内部RAM调试的基本步骤网上已经有非常多了,我就不再赘述,大家能够在网上搜到非常多. 可是有些时候内部RAM并不够用,这就须要将程序装入外部RAM中调试,而在这个过程中可能会出现各种各样 ...

  6. TRIZ系列-创新原理-28-替代机械系统原理

    替代机械系统原理的详细描写叙述例如以下:1)用光.声.热.嗅觉系统替代机械系统:2)用电.磁或电磁场来与物体交互作用:3)用移动场替代精巧场,用随时间变化的场替代固定场,用结构化的场替代随机场:4)使 ...

  7. easyui dataBox 增加一天，减少一天

    <table> <tr> <td><a href="javascript:void(0)" class="easyui-link ...

  8. easyui datagrid 单元格编辑 即见即所得,MVC菜单维护，扫描增加

    效果如图: 参见 EasyUI 官方 Demo 及文档 @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Lay ...

  9. C语言库函数大全及应用实例三

    原文:C语言库函数大全及应用实例三 [编程资料]C语言库函数大全及应用实例三 函数名: ecvt 功 能: 把一个浮点数转换为字符串 用 法: char ecvt(double value, int ...

  10. java中Integer包装类的具体解说(java二进制操作,全部进制转换)

    程序猿都非常懒,你懂的! 今天为大家分享的是Integer这个包装类.在现实开发中,我们往往须要操作Integer,或者各种进制的转换等等.我今天就为大家具体解说一下Integer的使用吧.看代码: ...