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 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
JS之相等操作符详解
Sep 13 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 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-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
php调用C代码的实现方法
2014/03/11 PHP
微信支付扫码支付php版
2016/07/22 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
angular2使用简单介绍
2016/03/01 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
浅析vue数据绑定
2017/01/17 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
利用JS制作万年历的方法
2017/08/16 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python基于动态规划算法计算单词距离
2015/07/25 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
python通过zabbix api获取主机
2018/09/17 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
个人自荐书
2013/12/20 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
趣味比赛活动方案
2014/02/15 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
中秋晚会活动方案
2014/08/31 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS