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. CodeForces 28D Don&#39;t fear, DravDe is kind dp

    主题链接:点击打开链接 为了让球队后,删除是合法的.也就是说,对于每一个车辆, l+r+c 一样,按l+r+c分类. 然后dp一下. #include <cstdio> #include ...

  2. 优秀团队建设--美国式团队(ppt)

    美国式团队 一.团队精神 团队精神反映一个人的素养.一个人的能力,一个人与别人合作的精神和能力.一个团队是个有机的总体,作为个人,仅仅有全然融入到这个有机总体之中,才干最大限度地体现自己的价值. 团队 ...

  3. 1711 Number Sequence(kmp)

    Problem Description Given two sequences of numbers : a[1], a[2], ...... , a[N], and b[1], b[2], .... ...

  4. Tyvj P1015 公路骑 （DP）

     叙述性说明 Description 一个特殊的单行道都在每公里公交车站.们乘坐汽车的公里使来付费. 比如例子的第一行就是一个费用的单子. 没有一辆车子行驶超过10公里.一个顾客打算行驶n公里(1 ...

  5. 有趣iOS开展 - 网络请求

    网络请求 $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split(' ...

  6. SQL字符串转换为数组

    /*一.按指定符号分割字符串,返回分割后的元素个数,方法很简单,就是看字符串中存在多少个分隔符号,然后再加一,就是要求的结果. -----rtrim(@str)去掉 @str右边的字符 ltrim(@ ...

  7. LeetCode_算法及数据结构覆盖统计

    [输入]共计151道题的算法&数据结构基础数据 (见附录A) [输出-算法]其中有算法记录的共计 97道 ,统计后 结果如下  top3(递归,动态规划,回溯) 递归 动态规划 回溯 BFS ...

  8. 使用Visifire+ArcGIS API for Silverlight实现Graphic信息的动态图表显示

    原文:使用Visifire+ArcGIS API for Silverlight实现Graphic信息的动态图表显示 首先来看一看实现的效果: PS:原始的程序中更新曲线数据时添加了过渡的效果,具体可 ...

  9. EasyUI combox实现联动

    多的时间将被用于combox联动效应.一个选择combox的值自己主动出这值有关相应的其他信息,例如省市联动.最近,我刚刚会见了班似要求,随着EasyUI  combobox 控制完成.假设ASP.N ...

  10. web设计师和前端设计师的互动—前端工程师应该具备的三种思维

    如果你是一个天才工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你.但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需 ...