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. Docker的基本使用(部署python项目)

    今天开始利用docker来部署项目,当然,首先,需要安装好Docker,这个在我的上篇中写了 一.准备项目 我写的是一个爬取某ppt网站的代码,就一个ppt1.py是爬虫,然后,ppts是存放下载的p ...

  2. anguglar 2+ md5加密

    1.安装 npm install ts-md5 --save 2.使用 import {Md5} from "ts-md5/dist/md5"; constructor() {co ...

  3. Zabbix监控web,MySQL,TCP状态,Nginx

    接上篇Zabbix使用SMTP发送邮件报警并且制定报警内容 Zabbix怎么设置声音告警 web监控 在zabbix server选择web 创建一个监控web的场景 添加后这里有数字1 查看 假如在 ...

  4. Orchard 与 ABP架构比较 (aspnetboilerplate)

    前言:  ABP框架经常在一些.NET群中听群友提起,以前也浏览过官网,大致了解它是一个框架,直到今天本人才正式下载源码入门 ... 经过两个小时的ABP中文文档入门(感谢各位辛勤的翻译者) ,大致了 ...

  5. HDU2855—Fibonacci Check-up

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2855 题目意思:求一个式子g[n]=∑C(n,k)*f[k],n很大,很明显是一个矩阵快速幂.可以打表 ...

  6. netstat -tulpn

    [root@d java]# netstat -tulpnActive Internet connections (only servers)Proto Recv-Q Send-Q Local Add ...

  7. 微信openid的单脚本获取 将 header 至自身,但是reques参数不同,响应也不同-----“单脚本APP”

    w 0-目的是封装成一个类.方法,方便在不同入口下,比如不是在微信公众号内而是在他人分享的url,获取opeid,且便于路由控制,将路由控制交给且仅交给codeigniter; 1-任何一个网站都可以 ...

  8. 【opencv】cv::Mat_ 对单个元素赋值

    创建一个cv::Mat_并赋值 cv::Mat_<,); mat(,)=VIRTUAL_FOCAL; mat(,)=; mat(,)=roiSize_x/; mat(,)=; mat(,)=VI ...

  9. pycharm修改选中字体颜色

    File->Setting->Editor->Color Scheme->General Scheme:Monokai 在方框内: Editor->Section Bac ...

  10. 从HD OJ 1005想到的

    杭电OJ [1005](http://acm.hdu.edu.cn/showproblem.php?pid=1005): #####Problem Description > A number ...