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 相关文章推荐
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
基于datagrid框架的查询
Apr 08 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
基于JS实现web端录音与播放功能
Apr 17 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生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
幼儿如何来做好自我评价
2013/11/05 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
教师个人鉴定材料
2014/02/08 职场文书
主要负责人任命书
2014/06/06 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
离婚纠纷代理词
2015/05/23 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库