JavaScript等比例缩放图片控制超出范围的图片


Posted in Javascript onAugust 06, 2013

js等比例缩放图片,这个功能非常实用,当网页加载一个尺寸比较大的图片时,往往会把一个网页撑的变形,页面变得很难看,于是我们就想到了用JS去控制超出一定范围的图片,三水点靠木以稳定页面布局,本代码段就是完成了此功能,而且代码非常简洁,效果很好。

<html><head><title>等比例缩放图片</title><script>function 
DrawImage(ImgD,iwidth,iheight){ //参数(图片,允许的宽度,允许的高度) 
var 
image=new Image(); image.src=ImgD.src; 
if(image.width>0 
&& image.height>0){ if(image.width/image.height>= 
iwidth/iheight){ if(image.width>iwidth){ 
ImgD.width=iwidth; 
ImgD.height=(image.height*iwidth)/image.width; 
}else{ 
ImgD.width=image.width; 
ImgD.height=image.height; 
} 
}else{ 
if(image.height>iheight){ 
ImgD.height=iheight; 
ImgD.width=(image.width*iheight)/image.height; 
}else{ 
ImgD.width=image.width; 
ImgD.height=image.height; 
} 
} 
} 
} 
</script></head><body><img src=https://3water.com/uploadfile/2013/0803/20130803034531502.jpg" 
alt="自动缩放后的效果" 
width="100" 
height="100" 
onload="javascript:DrawImage(this,80,80)" 
/></body></html>
Javascript 相关文章推荐
javascript 遍历验证所有文本框的值
Aug 27 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
javascript的BOM
May 03 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 #Javascript
浅析js中2个等号与3个等号的区别
Aug 06 #Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 #Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 #Javascript
jquery弹出关闭遮罩层实例
Aug 06 #Javascript
jquery批量控制form禁用的代码
Aug 06 #Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 #Javascript
You might like
简单采集了yahoo的一些数据
2007/02/14 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
JS常用函数使用指南
2014/11/23 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
介绍一下木马病毒的种类
2015/07/26 面试题
新闻编辑自荐信
2013/11/03 职场文书
服务员岗位责任制
2014/02/11 职场文书
云台山导游词
2015/02/03 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android