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和…

Extract Superclass(提炼超类)

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

扩展控件--NumberTextBox

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

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

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

使用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;将相同的子集提炼到一个独立接口中

Collapse Hierarchy(折叠继承体系)

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

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

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

Form Template Method(塑造模板函数)

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

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

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

物联网将在2018年实现大规模发展:以下是IBM的4大预测

来源&#xff1a;forbes物联网智库 编译概要&#xff1a;随着连接设备的数量达到110亿台&#xff08;不包括电脑和手机的连接量&#xff09;&#xff0c;很显然&#xff0c;在2018年&#xff0c;物联网将继续成为热点话题。随着连接设备的数量达到110亿台&#xff08;不包括电脑…

Replace Inheritance with Delegation(以委托取代继承)

某个子类只使用超类接口中的一部分&#xff0c;或是根本不需要继承而来的数据 重构&#xff1a;在子类中新建一个字段用来保存超类&#xff0c;调整子类函数&#xff0c;令它改而委托超类&#xff0c;然后去掉两者的继承关系

国家重点研发计划高新领域 “智能机器人、网络协同制造和智能工厂”重点专项2018年度项目申报指南建议

来源&#xff1a;机器人创新生态概要&#xff1a; 针对我国网络协同制造和智能工厂发展模式创新不足、技术能力尚未形成、融合新生态发展不足、核心技术/软件支撑能力薄弱等问题。征求意见时间为2018年2月8日至2018年2月22日。电子邮箱&#xff1a;重点专项名称邮箱地址智能机器…

Replace Delegation with Inheritance(以继承取代委托)

两个类之间使用委托关系&#xff0c;并经常为整个接口编写许多极简单的委托函数 重构&#xff1a;让委托类继承受托类

人造神经元计算速度超过人脑

来源&#xff1a;《科学进展》概要&#xff1a;一种以神经元为模型的超导计算芯片&#xff0c;能比人脑更高效快速地加工处理信息。一种以神经元为模型的超导计算芯片&#xff0c;能比人脑更高效快速地加工处理信息。近日刊登于《科学进展》的新成果&#xff0c;或许将成为科学…

[导入]将Byte数组转化为String

文章来源:http://blog.csdn.net/21aspnet/archive/2007/03/24/1539848.aspx 转载于:https://www.cnblogs.com/zhaoxiaoyang2/archive/2007/03/24/816232.html

Command 和 Active Object 模式

Command 和 Active Object 模式 Command 模式是封装了一个没有任何变量的函数。 public interface Command {public void do(); } 简单的Command 打印机工作流 开启/关闭继电器—RelayOnCommand、RelayOffCommand&#xff1b; 开启/关闭发动机—MotorOnCommand、MotorOffC…

成员函数指针作为参数是,静态函数和非静态函数的区别

成员函数指针作为参数时&#xff0c;静态函数和非静态函数的区别 举个 QT 的例子&#xff08;没学过QT的也不要紧&#xff0c;这适用于学习C的同学&#xff09;&#xff0c;当我有两个类&#xff0c;Teacher 类和 Student 类。现在有一个场景就是&#xff0c;Teacher 类会发出…

谷歌云TPU服务正式全面开放:「AlphaGo背后的芯片」进入商用化

来源&#xff1a;机器之心概要&#xff1a;作为科技巨头的谷歌早已把这种高度定制化产品应用在了自己的服务器中&#xff0c;而本周一&#xff0c;谷歌宣布其他公司马上也将可以享受新型芯片带来的计算服务了。2016 年 5 月&#xff0c;谷歌向世人发布了一款特别的机器学习专属…

波士顿动力新年视频第一发,机器人狗能为朋友开门了!

来源&#xff1a;36氪概要&#xff1a;波士顿动力公司的那只黄色机器人狗SpotMini&#xff0c;你还记得吗&#xff1f;波士顿动力公司的那只黄色机器人狗SpotMini&#xff0c;你还记得吗&#xff1f;它上一次亮相是在去年11月&#xff0c;当时它还在一片后院的草地上恣意奔跑。…