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 相关文章推荐
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 Javascript
JavaScript异步操作中串行和并行
Nov 20 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
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
es6数值的扩展方法
2019/03/11 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
Python字典简介以及用法详解
2016/11/15 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
2014年应届大学生自我评价
2014/01/09 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
个人廉政承诺书
2015/04/28 职场文书
深入浅析Django MTV模式
2021/09/04 Python