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. Log4j 2.0在具体解释发展先进的使用—SocketAppender远程输出(五岁以下儿童)

    Log4j2的Appenders充分考虑输出日志事件.包装和过滤可以被转发,它包含的主要输出到本地文件.输出到远程主机, 文件包.注射.而且,根据该日志文件的时间点.自己主动文件大小的储存条件. 例如 ...

  2. Java中间MD5加密算法完整版

    携带Java软件开发过程.,因此Java中提供了自带的MessageDigest实现对文本的加密算法,以下是一个对文本进行加密的MD5加密工具类代码演示样例: package net.yuerwan. ...

  3. Python基本语法[二]，python入门到精通[四] （转）

    写在前面 python你不去认识它,可能没什么,一旦你认识了它,你就会爱上它 回到顶部 v正文开始:Python基本语法 1.定义常量: 之所以上篇博客介绍了定义变量没有一起介绍定义常量,是因为Pyt ...

  4. 新秀系列C/C++经典问题(四)

    一个主题:查找最小的k个元素 输入n个整数.输出当中最小的k个. . 分析:这道题最简单的思路莫过于把输入的n个整数排序,这样排在最前面的k个数就是最小的k个数. 仅仅是这样的思路的时间复杂度为O(n ...

  5. OCP读书笔记(22) - 题库(ExamB)

    101.Identify two situations in which you can use Data Recovery Advisor for recovery. (Choose two.) A ...

  6. Java中间（三十五）-----Java详细设置（一个）：请指定初始容量设置

    集合是我们在Java编程中使用很广泛的,它就像大海,海纳百川,像万能容器,盛装万物.并且这个大海,万能容器还能够无限变大(假设条件同意). 当这个海.容器的量变得很大的时候,它的初始容量就会显得很重要 ...

  7. PL/SQL 9 许可证

    code:j6stndb9tk72xfbhbqczcdqnjd8lyj466n number:882851 ps:xs374ca 我是PL/SQL版本号是: Version 9.0.3.1641 要注 ...

  8. Visual Studio Code开发TypeScript

    [Tool] 使用Visual Studio Code开发TypeScript   [Tool] 使用Visual Studio Code开发TypeScript 注意 依照本篇操作步骤实作,就可以在 ...

  9. SSIS从理论到实战,再到应用

    原文:SSIS从理论到实战,再到应用 一,是什么(What?) 1.SSIS是Microsoft SQL Server Integration Services的简称,是生成高性能数据集成解决方案(包 ...

  10. 重写ArcGIS的TiledMapServiceLayer呼叫世界地图图块

    require(["esri/layers/TiledMapServiceLayer"], function () {     dojo.declare("com.Str ...