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

JavaScript


//图片按比例缩放
var flag=false;
function DrawImage(ImgD,iwidth,iheight){
//参数(图片,允许的宽度,允许的高度)
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
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;
}
ImgD.alt=image.width+"×"+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;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}

html


<img src="images/toplogo.gif" onload="javascript:DrawImage(this,100,100)">

JS等比例缩放图片,限定最大宽度和最大高度的更多相关文章

  1. JS按比例缩放图片

    1.JS代码 <script type="text/javascript" language="javascript"> var flag = fa ...

  2. js同比例缩放图片

    function DrawImage(ImgD, FitWidth, FitHeight) { var image = new Image(); image.src = ImgD.src; if (i ...

  3. JavaScript等比例缩放图片

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

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

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

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

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

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

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

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

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

  8. C#等比例缩放图片

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

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

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

随机推荐

  1. DNS rebinging攻击方式

    一.什么是DNS rebinding? 在dns协议中,请求和响应完成一台机器对一个域名的查询,响应信息包含请求域名站点对应的IP地址.假设你向DNS服务器A请求域名youself.domain.co ...

  2. ajax请求步骤

    ajax步骤:第一步:创建xmlhttprequest对象,var xmlhttp = new XMLHttpRequest(); XMLHttpRequest对象和服务器交换数据.第二步:使用xml ...

  3. Java 数组详解 - 用法、遍历、排序、实用API

    数组,就是相同数据类型的元素按一定顺序排列的集合,就是把有限个类型相同的变量用一个名字命名,然后用编号区分他们的变量的集合,这个名字称为数组名,编号称为下标. 组成数组的各个变量称为数组的分量,也称为 ...

  4. 通过TZ来设置嵌入式ARM+Linux的时区

    1.在/etc/profile或者/root/.profile(/home/username/.profile) 在其中加入: TZ=UTC-08:00 export TZ hwclock -s

  5. __destruct()析构函数的执行时刻 __construct()构造函数传入参数 构造函数与后台登录安全

    <?php class test_construct_avg { function __construct($input = '') { $this->input = $input; } ...

  6. datasnap rest Windows客户端编写

    首先吐槽一下XE关于datasnap的资料真的是太少了... 服务端用DSHTTPService1控件可以实现http接口方式的调用,返回的都是json格式数据,适用于跨平台解析. 这里着重强调一下d ...

  7. 关闭在chrome里使用双指前进后退页面的功能

    defaults write com.google.Chrome AppleEnableSwipeNavigateWithScrolls -bool FALSE

  8. Linux进入-adsdfsd目录

    Linux进入-adsdfsd目录 如果某个目录名称是短线(短横线)开头的 要想在命令行中进入目录,使用如下命令: cd -- -adsdfsd 延伸: 其他非寻常操作: http://www.cnb ...

  9. centos6.5安装cmake-gui

    首先下载cmake(官网,2.8.12版本) 解压 运行 ./bootstrap --qt-gui make make install 完成后,在/usr/local/bin目录下会出现cmake-g ...

  10. PAT 1059 Prime Factors[难]

    1059 Prime Factors (25 分) Given any positive integer N, you are supposed to find all of its prime fa ...