JavaScript等比例缩放图片控制超出范围的图片


Posted in Javascript onAugust 06, 2013

js等比例缩放图片,这个功能非常实用,当网页加载一个尺寸比较大的图片时,往往会把一个网页撑的变形,页面变得很难看,于是我们就想到了用JS去控制超出一定范围的图片,三水点靠木以稳定页面布局,本代码段就是完成了此功能,而且代码非常简洁,效果很好。

<html><head><title>等比例缩放图片</title><script>function 
DrawImage(ImgD,iwidth,iheight){ //参数(图片,允许的宽度,允许的高度) 
var 
image=new Image(); image.src=ImgD.src; 
if(image.width>0 
&& image.height>0){ 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; 
} 
}else{ 
if(image.height>iheight){ 
ImgD.height=iheight; 
ImgD.width=(image.width*iheight)/image.height; 
}else{ 
ImgD.width=image.width; 
ImgD.height=image.height; 
} 
} 
} 
} 
</script></head><body><img src=https://3water.com/uploadfile/2013/0803/20130803034531502.jpg" 
alt="自动缩放后的效果" 
width="100" 
height="100" 
onload="javascript:DrawImage(this,80,80)" 
/></body></html>
Javascript 相关文章推荐
浅谈javascript中createElement事件
Dec 05 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 #Javascript
浅析js中2个等号与3个等号的区别
Aug 06 #Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 #Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 #Javascript
jquery弹出关闭遮罩层实例
Aug 06 #Javascript
jquery批量控制form禁用的代码
Aug 06 #Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 #Javascript
You might like
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
Angular的$http与$location
2016/12/26 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
Python 元组(Tuple)操作详解
2014/03/11 Python
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
几个数据库方面的面试题
2016/07/01 面试题
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
成人毕业生自我鉴定
2013/10/18 职场文书
企业总经理职责
2014/02/02 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
先进教师个人总结
2015/02/11 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers