图片自动缩小的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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 Javascript
vue实现公共方法抽离
Jul 31 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 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初学者的8点有效建议
2010/11/20 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
php读取本地json文件的实例
2018/03/07 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
js中常用的Math方法总结
2017/01/12 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
英文自我鉴定
2013/12/10 职场文书
高中班长自我鉴定
2013/12/20 职场文书
暑期社会实践方案
2014/02/05 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
应届大学生自荐书
2014/06/17 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
自主招生英文自荐信
2015/03/25 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
详解如何使用Nginx解决跨域问题
2022/05/06 Servers