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 触发事件列表 比较不错
Sep 03 Javascript
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
jquery插件实现图片悬浮
Apr 16 jQuery
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操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
javascript 日期常用的方法
2009/11/11 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
Vue计算属性的使用
2017/08/04 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python XML RPC服务器端和客户端实例
2014/11/22 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
python实现简单文件读写函数
2021/02/25 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
飞利浦法国官网:Philips法国
2019/07/10 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
Java基础面试题
2014/07/19 面试题
企业军训感言
2014/02/08 职场文书
我为自己代言广告词
2014/03/18 职场文书
小学生家长寄语
2014/04/02 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
美容院合作经营协议书
2014/10/10 职场文书
楚门的世界观后感
2015/06/03 职场文书
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL