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 相关文章推荐
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
jquery处理json对象
Nov 03 Javascript
jquery选择器简述
Aug 31 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
基于javascript处理nginx请求过程详解
Jul 07 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 curl 抓取AJAX异步内容示例
2014/09/09 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
使用js画图之画切线
2015/01/12 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
Python基于twisted实现简单的web服务器
2014/09/29 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
2014年医学生毕业自我鉴定
2014/03/26 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
创新社会管理心得体会
2014/09/12 职场文书
医院保洁员管理制度
2015/08/05 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript