图片自动缩小的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 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 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来实现网络服务
2009/09/15 PHP
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
document.createElement()用法
2013/03/13 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
vue中activated的用法
2021/01/03 Vue.js
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
详解Python中DOM方法的动态性
2015/04/11 Python
Python中的下划线详解
2015/06/24 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
工程造价专业大学生职业规划范文
2014/03/09 职场文书
服务承诺书怎么写
2014/05/24 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书