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 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
jquery $.ajax入门应用一
Nov 19 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
JavaScript事件委托实例分析
May 26 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 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实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
jquery实现网页查找功能示例分享
2014/02/12 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
Python备份Mysql脚本
2008/08/11 Python
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
python使用nntp读取新闻组内容的方法
2015/05/08 Python
Python操作列表之List.insert()方法的使用
2015/05/20 Python
编写Python CGI脚本的教程
2015/06/29 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
彻底理解Python list切片原理
2017/10/27 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
python字典的常用方法总结
2019/07/31 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
Python里面如何拷贝一个对象
2014/02/17 面试题
编程输出如下图形
2013/11/24 面试题
大学生的四年学习自我评价
2013/12/13 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
离职信范本
2015/06/23 职场文书
工程款催款函
2015/06/24 职场文书
详解Python函数print用法
2021/06/18 Python