图片自动缩小的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 相关文章推荐
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 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不写闭合标签的好处
2014/03/04 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
JavaScript面象对象设计
2008/04/28 Javascript
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
js实现烟花特效
2020/03/02 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
python目录与文件名操作例子
2016/08/28 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
python实现二维插值的三维显示
2018/12/17 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
开朗女孩的自我评价
2014/02/10 职场文书
分家协议书
2014/04/21 职场文书
好的促销活动方案
2014/08/21 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
干部考核工作总结2015
2015/07/24 职场文书