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 相关文章推荐
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
javascript断点调试心得分享
Apr 23 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
简单了解vue 插值表达式Mustache
Jul 22 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 Javascript
写一个Vue loading 插件
Nov 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 MVC模式在网站架构中的实现分析
2010/03/04 PHP
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
PHP合并静态文件详解
2014/11/14 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
jQuery Tools tab使用介绍
2012/07/14 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
JS制作简单的三级联动
2015/03/18 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
python使用tensorflow深度学习识别验证码
2018/04/03 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
2014年工作总结与下年工作计划
2014/11/27 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
2016新年问候语大全
2015/11/11 职场文书
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers