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 相关文章推荐
js的闭包的一个示例说明
Nov 18 Javascript
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
梳理一下vue中的生命周期
Dec 30 Vue.js
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
PHP4之COOKIE支持详解
2006/10/09 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
window下eclipse安装python插件教程
2017/04/24 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
Python 串口读写的实现方法
2019/06/12 Python
python用match()函数爬数据方法详解
2019/07/23 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
新党员入党决心书
2015/09/22 职场文书