图片自动缩小的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 相关文章推荐
简单的js分页脚本
May 21 Javascript
关于this和self的使用说明
Aug 01 Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
vuex 的简单使用
Mar 22 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
openlayers4实现点动态扩散
Aug 17 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中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
javascript函数库-集合框架
2007/04/27 Javascript
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
javascript 写类方式之三
2009/07/05 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
JS作用域链详解
2017/06/26 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
分享Python字符串关键点
2015/12/13 Python
python并发编程之线程实例解析
2017/12/27 Python
实时获取Python的print输出流方法
2019/01/07 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
python实现证件照换底功能
2019/08/20 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
Python reversed函数及使用方法解析
2020/03/17 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
摄影实习自我鉴定
2013/09/20 职场文书
房屋转让协议书范本
2014/04/11 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
绿色出行口号
2014/06/18 职场文书
社团活动总结报告
2014/06/27 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
技术员个人工作总结
2015/03/03 职场文书