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

在Web上显示图片,通常都会有图片显示比例问题,如果不给<img />限制width和height,那么如果图片大了就会将整个页面挤乱,图片小了又会使图片失真。

  

        1、预先定义好图片显示的标准宽度和高度。
        2、如果图片的大小超过了标准定义,那么等比例压缩图片。
        3、如果图片的大小等于标准定义,那么按照标准宽度和高度显示图片。
        4、如果图片的大小小于标准定义,那么不对图片进行任何压缩处理。

 

复制代码
<script language="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;}}
} 
</script>
调用:
<img src="images/toplogo.gif" οnlοad="javascript:DrawImage(this,100,100)">
复制代码

 

 转:http://www.verydemo.com/demo_c98_i16948.html

转载于:https://www.cnblogs.com/yiwd/archive/2013/06/08/3126685.html

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

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

相关文章

【机器视觉学习笔记】python安装OpenCV并设置自动补全及代码提示

目录安装测试设置自动补全及代码提示平台&#xff1a;Windows 10 20H2 Python 3.8.12 (default, Oct 12 2021, 03:01:40) [MSC v.1916 64 bit (AMD64)] :: Anaconda, Inc. on win32 OpenCV 4.5.4.58 安装 本节内容引自使用pip安装Opencv —— xwc2 在要安装的环境内使用如下…

Android背景色渐变效果(shape,gradient) (转)

Android设置背景色可以通过在res/drawable里定义一个xml,如下&#xff1a; [代码]xml代码&#xff1a; <?xml version"1.0" encoding"utf-8"?> <shape xmlns:android"http://schemas.android.com/apk/res/android"> <gradie…

C语言字符串数字提取函数,支持负数、浮点数、科学记数法

目录效果普通数字小数科学记数法源码平台&#xff1a; STC89C52 Keil uVision V5.29.0.0 PK51 Prof.Developers Kit Version:9.60.0.0 效果 这里以51单片机为例&#xff0c;对串口接收的字符串中的第三个数进行解码&#xff1a; 普通数字 小数 科学记数法 源码 /* * Str2N…

eclipse编译hadoop插件

2019独角兽企业重金招聘Python工程师标准>>> 准备 eclipse ant1.8.0 hadoop1.2.1 src 步骤 1. 修改/home/hadoop/hadoop-1.2.1/src/contrib/build-contrib.xml 修改hadop.root值为实际的hadoop根目录 <property name"hadoop.root" location"…

【51单片机快速入门指南】1:基础知识和工程创建

目录简介命名规则51单片机的数据类型总表扩展数据类型stdint.h存储器类型关键字烧录工具工程的创建创建项目添加C文件配置工程存储模式配置输出配置代码优化配置编译烧录普中51-单核-A2 STC89C52 Keil uVision V5.29.0.0 PK51 Prof.Developers Kit Version:9.60.0.0 简介 51…

请不要做浮躁的嵌入式系统工程师(谨以此文与大家共勉)

2019独角兽企业重金招聘Python工程师标准>>> 1. 不要看到别人的回复&#xff0c;第一句话就说&#xff1a;给个代码吧&#xff01;你应该想想为什么。当你自己想出来再参考别人的提示&#xff0c;你就知道自己和别人思路的差异。 2. 初学者请不要看太多的书那会误人…

【51单片机快速入门指南】2:GPIO LED与按键

目录硬知识概念I/O口配置准双向口/弱上拉输出配置开漏输出配置实战延时函数的生成闪烁一个LED灯源码实验现象流水灯源码实验现象按键控制LED灯按键介绍源码实验现象普中51-单核-A2 STC89C52 Keil uVision V5.29.0.0 PK51 Prof.Developers Kit Version:9.60.0.0 硬知识 概念 …

菜鸟Linux攻略--目录文件权限的查看和修改(详细)

为什么80%的码农都做不了架构师&#xff1f;>>> 链接&#xff1a;http://zhaoyuqiang.blog.51cto.com/6328846/1214718 转载于:https://my.oschina.net/L110/blog/402042

【51单片机快速入门指南】2.1:数码管显示数字、小数 (科学计数法)

目录硬知识数码管简介多位数码管简介数码管动态显示原理74HC245 芯片简介74HC138 芯片简介上机实战源码Tube.cTube.hmain.c效果显示整数正数负数显示小数&#xff08;保留三位有效数字&#xff09;正数负数普中51-单核-A2 STC89C52 Keil uVision V5.29.0.0 PK51 Prof.Develop…

防USB病毒

Windows XP 需要用此步驟。Windows 7 就不需要了。 步驟1. 於「開始/執行」中執行 regedit&#xff0c;進入登錄編輯程式。2. 找到機碼名稱: HKEY_CURRENT_USER\Software\microsoft\Windows\CurrentVersion\Explorer\MountPoints23. 點選該機碼&#xff0c;按右鍵選擇「使用權限…

项目案例分享四:DC升级后Sysvol停止复制,日志报13508

最近在240个站点AD升级项目过程中遇到个别DC升级后Sysvol里面的内容同步到一半就不动了&#xff0c;连续一个星期都没有动静&#xff0c;今天在此跟大家分享此问题的处理方法。1.环境介绍其中DC01和DC02是中国总部的DC&#xff0c;中国地区其他两百多站点通过KCC生成的链路和DC…

【51单片机快速入门指南】2.2:任意位/任意长度数码管显示数字、小数

目录源码Tube.cTube.hmain.c效果8位数码管正整数负整数正小数负小数6位数码管正整数负整数正小数负小数4位数码管正整数负整数正小数负小数普中51-单核-A2 STC89C52 Keil uVision V5.29.0.0 PK51 Prof.Developers Kit Version:9.60.0.0 源码 移植时主要只修改Tube_Num数量、…

【51单片机快速入门指南】2.3:GPIO读取矩阵键盘 8个IO读16键

目录硬知识矩阵键盘介绍测试程序Key_Board.cKey_Board.hmain.c实验现象普中51-单核-A2 STC89C52 Keil uVision V5.29.0.0 PK51 Prof.Developers Kit Version:9.60.0.0 硬知识 选自《普中51单片机开发攻略_V1.2》 矩阵键盘介绍 独立按键与单片机连接时&#xff0c;每一个按键…

【51单片机快速入门指南】2.4:74HC595、LED点阵屏及其SPI控制

目录硬知识IO 口扩展方式-串转并74HC595 芯片介绍硬件设计测试源码HC74595.cHC74595.hmain.h实验现象SPI控制普中51-单核-A2 STC89C52 Keil uVision V5.29.0.0 PK51 Prof.Developers Kit Version:9.60.0.0 硬知识 选自《普中51单片机开发攻略_V1.2》 IO 口扩展方式-串转并 …

【51单片机快速入门指南】3:中断系统

目录硬知识中断概念中断系统中断结构中断优先级中断处理普中51-单核-A2 STC89C52 Keil uVision V5.29.0.0 PK51 Prof.Developers Kit Version:9.60.0.0 硬知识 选自《普中51单片机开发攻略_V1.2》、《STC89C52系列单片机器件手册》 中断概念 中断是为使单片机具有对外部或内…

正能量之项目经理的自我修养

正能量之项目经理的自我修养 作者&#xff1a;张子良 版权所有&#xff0c;转载请注明出处 引子 还记得曾经看过的《喜剧之王》么&#xff1f;还记的那曾经经典的台词么&#xff1a;“我不是死跑龙套的”&#xff0c;“人如果没有理想&#xff0c;和咸鱼又有什么区别呢&#xf…

利用D触发器和异或门实现两个IO解读电机编码器的计数值和方向

目录反转变正转正转变反转iPad Pro 2020 14.8.1 仿真软件&#xff1a;iCircuit 突发奇想&#xff0c;做个记录。应该可以用于诸如51单片机、Arduino或是电赛中可能用到的MSP430G2553这类外设十分稀缺的单片机上。一个想法&#xff0c;啊&#xff0c;不一定对。 黄色波形是编码…

TCP协议的三次握手和四次分手

HTTP连接 HTTP协议即超文本传送协议(Hypertext Transfer Protocol )&#xff0c;是Web联网的基础&#xff0c;也是手机联网常用的协议之一&#xff0c;HTTP协议是建立在TCP协议之上的一种应用。HTTP连接最显著的特点是客户端发送的每次请求都需要服务器回送响应&#xff0c;在请…

CountDownLatch线程同步辅助

2019独角兽企业重金招聘Python工程师标准>>> http://bughope.iteye.com/blog/2081935 在上一篇文章中写道用一个静态的变量保存线程的执行状态,并用时间等待的方法后来仔细考虑,其实是 线程不安全的.多个线程同时执行这个类时,这个静态变量的值就不能保证了. 用一个…

【51单片机快速入门指南】3.1:配置外部中断触发方式和中断优先级

目录源码EXTI.cEXTI.hmain.c实验现象普中51-单核-A2 STC89C52 Keil uVision V5.29.0.0 PK51 Prof.Developers Kit Version:9.60.0.0 源码 stdint.h见【51单片机快速入门指南】1&#xff1a;基础知识和工程创建 中断知识见【51单片机快速入门指南】3&#xff1a;中断系统 将…