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 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
javascript闭包入门示例
Apr 30 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
JS常见算法详解
Feb 28 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 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
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
JQuery中$之选择器用法介绍
2011/04/05 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
JS面向对象编程详解
2016/03/06 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
浅谈node的事件机制
2017/10/09 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
Python工厂函数用法实例分析
2018/05/14 Python
python实现批量注册网站用户的示例
2019/02/22 Python
python算法题 链表反转详解
2019/07/02 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
大学生自我鉴定范文
2013/12/28 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
普通党员对照检查材料
2014/08/28 职场文书
投资入股合作协议书
2014/10/28 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
中国世界遗产导游词
2015/02/13 职场文书