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操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
javascript 动态创建表格
Jan 08 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 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具体实现代码
2010/10/12 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
javascript 实现map集合
2015/04/03 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
jQuery实现日历效果
2020/09/11 jQuery
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
python计算日期之间的放假日期
2018/06/05 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
python实现移动木板小游戏
2020/10/09 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
倡议书范文
2014/04/16 职场文书
竞选学委演讲稿
2014/09/13 职场文书
高中生学习计划书
2014/09/15 职场文书
自主招生自荐信范文
2015/03/04 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书