图片自动缩小的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代码(站点及虚拟目录)
Oct 20 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
ionic实现底部分享功能
May 11 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 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实现网上点歌(二)
2006/10/09 PHP
深入密码加salt原理的分析
2013/06/06 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
js 深拷贝函数
2008/12/04 Javascript
UserData用法总结 lanyu出品
2010/07/01 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
javascript实现下雨效果
2017/03/27 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
Vue实现购物车基本功能
2020/11/08 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
python中pycurl库的用法实例
2014/09/30 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
python入门之基础语法学习笔记
2020/02/08 Python
实习自荐信
2013/10/13 职场文书
环境建设实施方案
2014/03/14 职场文书
公共场所标语
2014/06/30 职场文书
绿色小区申报材料
2014/08/22 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
教师节寄语2015
2015/03/23 职场文书
运动会通讯稿600字
2015/07/20 职场文书
Go中的条件语句Switch示例详解
2021/08/23 Golang