JavaScript实现网页图片等比例缩放实现代码及调用方式


Posted in Javascript onFebruary 25, 2013

在处理网页图片时,特别是一些图片列表的应用里面,很难保证图片统一大小,直接设置图片大小又会导致图片拉伸,造成图片模糊,本文介绍的代码可以在图片加载完成后自动按比例调整图片大小。
Javascript:

< script language="javascript" type="text/javascript"> 
< !-- 
// 说明:用 JavaScript 实现网页图片等比例缩放 
// 整理:http://www.CodeBit.cn 
function DrawImage(ImgD,FitWidth,FitHeight) 
{ 
var image=new Image(); 
image.src=ImgD.src; 
if(image.width>0 && image.height>0) 
{ 
if(image.width/image.height>= FitWidth/FitHeight) 
{ 
if(image.width>FitWidth) 
{ 
ImgD.width=FitWidth; 
ImgD.height=(image.height*FitWidth)/image.width; 
} 
else 
{ 
ImgD.width=image.width; 
ImgD.height=image.height; 
} 
} 
else 
{ 
if(image.height>FitHeight) 
{ 
ImgD.height=FitHeight; 
ImgD.width=(image.width*FitHeight)/image.height; 
} 
else 
{ 
ImgD.width=image.width; 
ImgD.height=image.height; 
} 
} 
} 
} 
//--> 
< script>

调用方式:
Code:
<img src="1148202890.jpg" alt="自动缩放后的效果" onload="javascript:DrawImage(this,200,200);" />

如果图片较大,建议在图片标签里面同时设置期望的图片大小,这样不会导致页面在加载中撑开,该大小不会影响最终缩放效果。可以修改上面的代码为:
Code:
<img src="1148202890.jpg" alt="自动缩放后的效果" width="200" height="200" onload="javascript:DrawImage(this,200,200);" />
Javascript 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
JavaScript运算符小结
Jun 03 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 #Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 #Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 #Javascript
IE的fireEvent方法概述及应用
Feb 22 #Javascript
js取得url地址参数实例
Feb 22 #Javascript
js模拟滚动条(横向竖向)
Feb 22 #Javascript
js时间日期和毫秒的相互转换
Feb 22 #Javascript
You might like
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
PHP中的extract的作用分析
2008/04/09 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
smarty中js的调用方法示例
2014/10/27 PHP
php的sso单点登录实现方法
2015/01/08 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
JavaScript静态的动态
2006/09/18 Javascript
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
Python实现Youku视频批量下载功能
2017/03/14 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
python反扒机制的5种解决方法
2021/02/06 Python
C/C++程序员常见面试题一
2012/12/08 面试题
六一儿童节活动策划方案
2014/01/27 职场文书
运输服务质量承诺书
2014/03/27 职场文书
小学语文课后反思精选
2014/04/25 职场文书
大学自主招生推荐信
2014/05/10 职场文书
供应链金融服务方案
2014/05/25 职场文书
节水倡议书
2015/01/19 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python