JavaScript,等比例缩放图片的函数,很好用。

在Web上显示图片,通常都会有图片显示比例问题,如果不给<img />限制width和height,那么如果图片大了就会将整个页面挤乱,图片小了又会使图片失真。
    我的需求如下:
        1、预先定义好图片显示的标准宽度和高度。
        2、如果图片的大小超过了标准定义,那么等比例压缩图片。
        3、如果图片的大小等于标准定义,那么按照标准宽度和高度显示图片。
        4、如果图片的大小小于标准定义,那么不对图片进行任何压缩处理。
    可能是我搜索的关键字不对吧,在网上找了很长时间,才找到,感觉很好使。代码如下
None.gif<script language="JavaScript">
None.gif
<!--
None.gif
//图片按比例缩放
None.gif
var flag=false;
ExpandedBlockStart.gifContractedBlock.giffunction DrawImage(ImgD,iwidth,iheight)
dot.gif{
InBlock.gif    
//参数(图片,允许的宽度,允许的高度)
InBlock.gif
    var image=new Image();
InBlock.gif    image.src
=ImgD.src;
ExpandedSubBlockStart.gifContractedSubBlock.gif    
if(image.width>0 && image.height>0)dot.gif{
InBlock.gif    flag
=true;
ExpandedSubBlockStart.gifContractedSubBlock.gif    
if(image.width/image.height>= iwidth/iheight)dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif        
if(image.width>iwidth)dot.gif{  
InBlock.gif        ImgD.width
=iwidth;
InBlock.gif        ImgD.height
=(image.height*iwidth)/image.width;
ExpandedSubBlockStart.gifContractedSubBlock.gif        }
elsedot.gif{
InBlock.gif        ImgD.width
=image.width;  
InBlock.gif        ImgD.height
=image.height;
ExpandedSubBlockEnd.gif        }

InBlock.gif        ImgD.alt
=image.width+"×"+image.height;
ExpandedSubBlockEnd.gif        }

ExpandedSubBlockStart.gifContractedSubBlock.gif    
elsedot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif        
if(image.height>iheight)dot.gif{  
InBlock.gif        ImgD.height
=iheight;
InBlock.gif        ImgD.width
=(image.width*iheight)/image.height;        
ExpandedSubBlockStart.gifContractedSubBlock.gif        }
elsedot.gif{
InBlock.gif        ImgD.width
=image.width;  
InBlock.gif        ImgD.height
=image.height;
ExpandedSubBlockEnd.gif        }

InBlock.gif        ImgD.alt
=image.width+"×"+image.height;
ExpandedSubBlockEnd.gif        }

ExpandedSubBlockEnd.gif    }

ExpandedBlockEnd.gif}
 
None.gif
//-->
None.gif
</script>
None.gif调用:
<img src="images/toplogo.gif" onload="javascript:DrawImage(this,100,100)">

转载于:https://www.cnblogs.com/kingeric/archive/2007/01/01/609476.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/497186.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习综述:Hinton、Yann LeCun和Bengio经典重读

来源&#xff1a;人工智能头条翻译 | kevin&#xff0c;刘志远审校 | 李成华深度学习三巨头Geoffrey Hinton、Yann LeCun和Yoshua Bengio对AI领域的贡献无人不知、无人不晓。本文是《Nature》杂志为纪念人工智能60周年而专门推出的深度学习综述&#xff0c;也是Hinton、LeCun和…

关于前端的实操试题

HTML 创建一个简单的HTML文档结构&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>My H…

Extract Superclass(提炼超类)

两个类有相识特性 重构&#xff1a;为这两个类建立一个超类&#xff0c;将相同特性搬移到超类

Linux中find常见用法示例

From&#xff1a;http://www.cnblogs.com/wanqieddy/archive/2011/06/09/2076785.html find和xargs和locate&#xff1a;http://blog.csdn.net/freeking101/article/details/51566458 Linux中find常见用法示例 find path -option [ -print ] [ -exec -ok comma…

扩展控件--NumberTextBox

有些时候我们要限制TextBox的输入 &#xff0c;比如age telephone等字段&#xff0c;故我们要在其某些事件里处理&#xff0c;如果那样的话下次再遇到此类情况我们又的重复操作&#xff0c;在此我们对其进行扩展使其只可以接受 Number输入&#xff0c;这里我们override 其WndP…

C++学习之路 | PTA乙级—— 1020 月饼 (25分)(精简)

1020 月饼 (25分) 月饼是中国人在中秋佳节时吃的一种传统食品&#xff0c;不同地区有许多不同风味的月饼。现给定所有种类月饼的库存量、总售价、以及市场的最大需求量&#xff0c;请你计算可以获得的最大收益是多少。 注意&#xff1a;销售时允许取出一部分库存。样例给出的情…

AI战略投资全景图:11个行业200多家巨头最爱什么样的AI创业公司?

原作 Kyle Kling李杉 编译自 LinkedIn量子位 出品 | 公众号 QbitAI各行各业都在谈人工智能&#xff0c;各类企业都想运用这项技术来提升自己、捍卫行业地位。究竟哪些行业、哪些公司最积极&#xff1f;哪些AI细分方向最受重视&#xff1f;MDI Ventures美国投资总监Kyle Kling分…

关于调用Oracle存储过程时发生“BCD Overflow”错误的处理

笔者最近在使用TSQLStoredProc调用Oracle存储过程时发现&#xff0c;即使存储过程体为空时&#xff0c;都会发生 BCD Overflow 错误&#xff0c;该表部分定义如下&#xff1a;PLANE_ALL_PARAMETER表&#xff1a;字段名数据类型PLANE_MODEL_IDNUMBERNATURAL_FLY_WEIGHT FLOATNOL…

使用javafx百行代码搞定多边形面积计算(可下载)

输出多边形面积 一、使用JavaFX Scene Builder 2.0制作界面&#xff0c;因为比较懒&#xff0c;直接偷工减料&#x1f601;&#x1f601;&#x1f601; 界面部分非常简陋 1.引入库 //main.java 部分 public class main extends Application {Overridepublic void start(Stage…

Extract Interface(提炼接口)

两个类的接口有部分相同 重构&#xff1a;将相同的子集提炼到一个独立接口中

Google Analytics(分析)

前两次我给大家介绍过google的gmail服务&#xff08;google的Gmail服务 赠送邀请函 &#xff09;和网上论坛服务&#xff08;google 网上论坛 &#xff09;。其实google还有很的网络产品都是供大家免费使用的&#xff0c;而且都是一些很优秀的产品或者是工具。我除了使用介绍过…

设计模式1—创建型模式

模式在一定环境中解决某一问题的方案&#xff0c;包括三个基本元素--问题&#xff0c;解决方案和环境。大白话&#xff1a;在一定环境下&#xff0c;用固定套路解决问题。设计模式&#xff08;Design pattern&#xff09;是一套被反复使用、多数人知晓的、经过分类编目的、代码…

C++学习之路 | PTA乙级—— 1021 个位数统计 (15分)(精简)

1021 个位数统计 (15分) 给定一个 k 位整数 Nd ​k−1 ​​ 10 ​k−1 ​​ ⋯d ​1 ​​ 10 ​1 ​​ d ​0 ​​ (0≤d ​i ​​ ≤9, i0,⋯,k−1, d ​k−1 ​​ >0)&#xff0c;请编写程序统计每种不同的个位数字出现的次数。例如&#xff1a;给定 N100311&#xff0c;…

Collapse Hierarchy(折叠继承体系)

超类和子类之间无太大区别 重构&#xff1a;将它们合为一体

65% 的钱被头部玩家拿走,人工智能要进入下半场?

来源&#xff1a;IT桔子概要&#xff1a;2017年&#xff0c;自动驾驶、医疗影像、AI教育成为焦点&#xff1b;一多半AI风险投资被第一梯队选手收入囊中&#xff0c;并快速成长为独角兽。2017年&#xff0c;自动驾驶、医疗影像、AI教育成为焦点&#xff1b;一多半AI风险投资被第…

转:用ASP.NET创建网络相册

用ASP.NET创建网络相册 在现在的数码时代&#xff0c;我们会经常拍摄一些相片以供留念&#xff0c;而随着数码照片的增多&#xff0c;往往需要很好地管理这些照片&#xff0c;以便更好地查阅留念。现在网上有不少的电子相册&#xff0c;都能很好的实现这些功能&#xff0c;那我…

设计模式2—结构型模式

结构型模式用来处理类或者对象的组合&#xff0c;主要包含以下7种设计模式&#xff1a;1. 代理模式&#xff08;Proxy Pattern&#xff09;就是为其他对象提供一种代理以控制对这个对象的访问。2. 装饰者模式&#xff08;Decorator Pattern&#xff09;动态的给一个对象添加一些…

C++学习之路 | PTA乙级—— 1022 D进制的A+B (20分)(精简)

1022 D进制的AB (20分) 输入两个非负 10 进制整数 A 和 B (≤2 ​30 ​​ −1)&#xff0c;输出 AB 的 D (1<D≤10)进制数。 输入格式&#xff1a; 输入在一行中依次给出 3 个整数 A、B 和 D。 输出格式&#xff1a; 输出 AB 的 D 进制数。 输入样例&#xff1a; 123 45…

Form Template Method(塑造模板函数)

有一些子类&#xff0c;其中相应的某些函数以相同顺序执行类似的操作&#xff0c;但各个操作的细节有不同 重构&#xff1a;将这些操作分别放进独立函数中&#xff0c;并保持它们都有相同的签名&#xff0c;然后将原函数上移至超类

自动驾驶第一案结果敲定,谷歌无人驾驶和Uber达成2.5亿美元和解协议

来源&#xff1a;36氪概要&#xff1a;Uber 与谷歌无人驾驶部门 Waymo 的法律纠纷以庭外和解的方式告一段落。Uber 与谷歌无人驾驶部门 Waymo 的法律纠纷以庭外和解的方式告一段落。上周五 &#xff0c;Uber 表示&#xff0c;公司已经和 AlphabetInc 旗下的无人驾驶汽车公司 Wa…