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 相关文章推荐
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
javascript连续赋值问题
Jul 08 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 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函数scandir排除特定目录
2014/06/12 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
php实现微信扫码支付
2017/03/26 PHP
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
python处理图片之PIL模块简单使用方法
2015/05/11 Python
python单例模式实例解析
2018/08/28 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
市场营销毕业生自荐信
2013/11/23 职场文书
班级课外活动总结
2014/07/09 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
学习保证书100字
2015/02/26 职场文书
教师节简报
2015/07/20 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
TV动画《间谍过家家》公开PV
2022/03/20 日漫