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. hdu 4975 最大流问题解决队伍和矩阵，利用矩阵dp优化

    //刚開始乱搞. //网络流求解,假设最大流=全部元素的和则有解:利用残留网络推断是否唯一, //方法有两种,第一种是深搜看看是否存在正边权的环.见上一篇4888 //至少四个点构成的环,另外一种是用 ...

  2. js:深闭包(范围：上)

    /**  * 范围封锁  */ fn1(); //fn1 您可以运行,没有报错,对于由function func_name()这样的写法来定义的函数,永远都会被最先初始化. function fn1( ...

  3. Linux makefile 课程 非常具体的，和理解

    最近的一项研究Linux根据C计划,我买了一个电话<Linux环境C编程指南>阅读makefile这使他看起来困惑,我可能无法理解. 于是google到了下面这篇文章. 通俗易懂. 然后把 ...

  4. 【C++基础】类的组合

    所谓类的组合是指:类中的成员数据是还有一个类的对象或者是还有一个类的指针或引用.通过类的组合能够在已有的抽象的基础上实现更复杂的抽象. 比如: 1.按值组合 #include<iostream. ...

  5. UVA Don&#39;t Get Rooked

    主题如以下:  Don't Get Rooked  In chess, the rook is a piece that can move any number of squaresverticall ...

  6. 一个JavaWeb项目开发总结

    一.学会如何读一个JavaWeb项目源代码 步骤:表结构->web.xml->mvc->db->spring ioc->log->代码 先了解项目数据库的表结构,这 ...

  7. 随想录（从apple的swift语言说起）

    [ 声明:版权全部,欢迎转载,请勿用于商业用途.  联系信箱:feixiaoxing @163.com] 喜欢apple的程序猿朋友对wwdc肯定不会陌生.本次wwdc上最大的一个亮点之中的一个就是s ...

  8. Reactive Extensions（Rx）并发浅析

    Reactive Extensions(Rx)并发浅析 iSun Design & Code .Net并行编程 - Reactive Extensions(Rx)并发浅析 关于Reactive ...

  9. APMServ—我用过的最优秀的PHP集成环境工具

    原文:APMServ-我用过的最优秀的PHP集成环境工具 经常折腾wordpress和各种cms,免不了要在本地测试一些程序,所以选择一款好的php集成环境就至关重要啦. 1. 我用过的php集成环境 ...

  10. Access to the temp directory is denied. Identity 'NT AUTHORITY\NETWORK SERVICE' under which XmlSerializer is running does not have sufficient permiss

    造成错误的原因是用bat代码清理系统垃圾时造成的权限丢失而引起的 错误描述 1.An error occurred creating the configuration section handler ...