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 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
JavaScript中的Window窗口对象
Jan 16 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
JavaScript实现省市区三级联动
Feb 13 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
smarty实例教程
2006/11/19 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
关于IIS php调用com组件的权限问题
2012/01/11 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
jQuery的12招常用技巧分享
2011/08/08 Javascript
javascript工具库代码
2012/03/29 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
Vue使用NPM方式搭建项目
2018/10/25 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
Python Socket传输文件示例
2017/01/16 Python
Python unittest模块用法实例分析
2018/05/25 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
一名毕业生的自我鉴定
2013/12/04 职场文书
教师网络培训感言
2014/03/09 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
2014超市收银员工作总结
2014/11/13 职场文书