图片自动缩小的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重写Cognos右键菜单的实现代码
Apr 11 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
微信小程序合法域名配置方法
May 06 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 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 Token(令牌)设计
2008/03/15 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
浅谈js中的this问题
2017/08/31 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
python http基本验证方法
2018/12/26 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
Nike香港官网:Nike HK
2019/03/23 全球购物
销售行业个人求职自荐信
2013/09/25 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
手机被没收的检讨书
2014/10/04 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书