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. html的table列表根据奇数还是偶数行显示不同颜色

    <tr <s:if test="#sts.even"> class="table_1" onMouseOut="this.class ...

  2. highcharts配置的效果如下

    配置如下: function init(categoryArray,seriesData,month_first_day,month_last_day,currDay){ var chart = Hi ...

  3. XStream别名;元素转属性;去除集合属性(剥皮);忽略不需要元素

    city package xstream; public class City { private String name; private String description; public St ...

  4. Vue基础-匿名插槽与作用域插槽的合并和覆盖行为

    Vue 测试版本:Vue.js v2.5.13 Vue 文档: <slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容.多个插槽可以有不同的名字.具名插槽将匹配内容片段 ...

  5. Android Handler 的使用

    Android UI 操作是线程不安全的.我们只能在UI线程或者说主线程中修改UI.试想多个Thread操作同一个UI,可能引起不一致.UI 线程的主要工作是:UI界面更新显示,各个控件的交互等等.一 ...

  6. 预见未来丨机器学习:未来十年研究热点 量子机器学习(Quantum ML) 量子计算机利用量子相干和量子纠缠等效应来处理信息

    微软研究院AI头条 https://mp.weixin.qq.com/s/SAz5eiSOLhsdz7nlSJ1xdA 预见未来丨机器学习:未来十年研究热点 机器学习组 微软研究院AI头条 昨天 编者 ...

  7. echarts容器动态设置高度

    测试提了bug,柱状图数据多的情况下,都叠到了一起,效果如下图. 要解决这个bug,首先想到的是让柱状图的容器自适应高度.于是,把原本div上写固定的高度去掉. <div id="my ...

  8. d3.js:数据可视化利器之 交互行为:响应DOM事件

    selection.on:事件监听操作符 on()操作符可以添加或移除选择集中每个 DOM元素的事件监听函数: selection.on(type[,listener[,capture]]) 参数ty ...

  9. window下的开发环境:常用软件

    window下的开发环境:常用软件 Visio 2010  - 产品设计 xmind        -产品设计 Axure       -产品设计 Edraw max 7.3(破解版)  -产品设计 ...

  10. 5.如何调节ubuntu的分辨率

    http://jingyan.baidu.com/article/0964eca2351ed58285f5361d.html