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

<html>

<head>

<title>等比例缩放图片</title>

<script>

function DrawImage(ImgD,iwidth,iheight){

    //参数(图片,允许的宽度,允许的高度)

    var image=new Image();

    image.src=ImgD.src;

    if(image.width>0 && image.height>0){

      if(image.width/image.height>= iwidth/iheight){

          if(image.width>iwidth){

              ImgD.width=iwidth;

              ImgD.height=(image.height*iwidth)/image.width;

          }else{

              ImgD.width=image.width;

              ImgD.height=image.height;

          }

      }else{

          if(image.height>iheight){

              ImgD.height=iheight;

              ImgD.width=(image.width*iheight)/image.height;

          }else{

              ImgD.width=image.width;

              ImgD.height=image.height;

          }

      }

    }

}

</script>

</head>

<body>

<img src="http://avatar.csdn.net/9/9/5/1_qiaqia609.jpg" alt="自动缩放后的效果" width="100" height="100" onload="javascript:DrawImage(this,80,80)" />

</body>

</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. Angular报错记录

    一 找不到Controller 出现这种错误,一般都是没有找到需要的Controller,需要仔细检查是否所需的Controller已经正确引入

  2. keyboard splitting bug on ipad with ios 5 and 6 (Cocos2d-x)

    Had the same issue - the solution is to stop the opengl layer from rendering while this is happening ...

  3. HDU 4292Food(网络流的最大流量）

    职务地址:HDU 4292 水题. 因为每一个人仅仅能有1份,所以须要拆点限制流量.建图方法为,建一源点与汇点.将食物与源点相连,权值为食物额数量,将饮料与汇点相连,权值为饮料数量..然后将人进行拆点 ...

  4. 查询oracle sql运行计划，一个非常重要的观点--dba_hist_sql_plan

    该文章的作者给予了极大的帮助长老枯荣,为了表达我的谢意. 这适用于oracle db版本号oracle 10g或者更高的版本号. 之所以说这种看法是非常重要的,因为观点是有之一awrsqrpt报告没有 ...

  5. 数组排序、递归——（Java学习笔记二）

    升序:      选择排序:         选定一个元素,一次和后面的元素相比较,如果选定的元素大雨后面的比较元素,就交换位置         先出现最小值,最后出现最大值. public stat ...

  6. crmplugin项目加入key文件

    通常,办crm的plugin发展,然后dll文件导入系统,都需要加入项目key文件,那么怎么办? 在右上角单击指定项目--属性: 点击属性后,弹出属性编辑框: watermark/2/text/aHR ...

  7. SQL Prompt5 破解版+使用说明 [转]

    SQL脚本越写越多,总是觉得编写效率太过于低下,这和打字速度无关.在我个人编写SQL脚本时,至少会把SQL的格式排列成易于阅读的,因为其他人会阅读到你的SQL,无论是在程序中或是脚本文件中,良好的排版 ...

  8. 基于STM32旋转编码器

    ..\..\SYSTEM\usart\usart.c(1): error:  #5: cannot open source input file "sys.h": No such ...

  9. Fireasy

    Fireasy与Asp.net MVC结合   Fireasy之前都是使用HttpService来为jquery ajax提供服务,这个HttpService实际上和MVC的原理机制是一样的,只是它支 ...

  10. CSharp设计模式读书笔记（15）：命令模式(学习难度：★★★☆☆，使用频率：★★★★☆)

    命令模式(Command Pattern):将一个请求封装为一个对象,从而让我们可用不同的请求对客户进行参数化:对请求排队或者记录请求日志,以及支持可撤销的操作.命令模式是一种对象行为型模式,其别名为 ...