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 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 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中对用户身份认证实现两种方法
2011/06/04 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
元素全屏的设置与监听实例
2017/11/28 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
浅谈function(函数)中的动态参数
2017/04/30 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
类、抽象类、接口的差异
2016/06/13 面试题
天网面试题
2013/04/07 面试题
初任培训自我鉴定
2013/10/07 职场文书
安全生产承诺书
2014/03/26 职场文书
篮球社团活动总结
2014/06/27 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
患者身份识别制度
2015/08/06 职场文书
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技