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 学习笔记(六)
Dec 31 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
JavaScript实现alert弹框效果
Nov 19 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中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
实例解析php的数据类型
2018/10/24 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
python列表的逆序遍历实现
2020/04/20 Python
python suds访问webservice服务实现
2020/06/26 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
《赶海》教学反思
2014/04/20 职场文书
董事长秘书工作职责
2014/06/10 职场文书
中标通知书范本
2015/04/17 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技