图片自动缩小的js代码,用以防止图片撑破页面


Posted in Javascript onMarch 12, 2007

JS代码(随便放哪里):
<script language="JavaScript"> 
<!-- 
var flag=false; 
function DrawImage(ImgD){ 
var image=new Image(); 
image.src=https://3water.com/htmldata/2006-01-08/ImgD.src; 
if(image.width>0 && image.height>0){ 
  flag=true; 
  if(image.width/image.height>= 180/110){ 
   if(image.width>180){
    ImgD.width=180; 
    ImgD.height=(image.height*110)/image.width; 
   }else{ 
    ImgD.width=image.width;
    ImgD.height=image.height; 
   } 
   /*ImgD.alt="bigpic"  */
  } 
  else{ 
   if(image.height>110){
    ImgD.height=110; 
    ImgD.width=(image.width*110)/image.height; 
   }else{ 
    ImgD.width=image.width;
    ImgD.height=image.height; 
   } 
    /*ImgD.alt="bigpic"  */ 
  } 
}
}
//--> 
</script>
图片使用的地方:
<img src="https://3water.com/htmldata/2006-01-08/图片" border=0 width="180" height="110" onload="javascriptrawImage(this);">
width="180" height="110"  注意这里最好限定,如果不限定加载图时会成原大,然后再缩小,这个过程如果图大了很难看的.这里是宽度和高度,在前面的JS里改,这里也作相应的改.
图不会变形,只会按比列缩,放心

Javascript 相关文章推荐
javascript 动态加载 css 方法总结
Jul 11 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
自己做的模拟模态对话框实现代码
May 23 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 #Javascript
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 #Javascript
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 #Javascript
(function(){})()的用法与优点
Mar 11 #Javascript
可以文本显示的公告栏的js代码
Mar 11 #Javascript
简单三步,搞掂内存泄漏
Mar 10 #Javascript
如何简单地用YUI做JavaScript动画
Mar 10 #Javascript
You might like
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
dess中一个简单的多路委托的实现
2010/07/20 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
在Python中进行自动化单元测试的教程
2015/04/15 Python
python动态加载包的方法小结
2016/04/18 Python
深入理解Python中的*重复运算符
2017/10/28 Python
在python里面运用多继承方法详解
2019/07/01 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
HTML5新增加的功能详解
2016/09/05 HTML / CSS
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
什么是岗位职责
2013/11/12 职场文书
小学生安全演讲稿
2014/04/25 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python