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 13 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 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
获得Google PR值的PHP代码
2007/01/28 PHP
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
python实现简单学生信息管理系统
2020/04/09 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
三年级数学教学反思
2014/01/31 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书