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 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
TypeScript 中接口详解
Jun 19 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
js中判断控件是否存在
2010/08/25 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
python求pi的方法
2014/10/08 Python
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
windows下python和pip安装教程
2018/05/25 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
自我鉴定书
2014/03/24 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
冰峪沟导游词
2015/02/09 职场文书
理解深度学习之深度学习简介
2021/04/14 Python