图片自动缩小的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 相关文章推荐
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
AngularJs 指令详解及示例代码
Sep 01 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 Javascript
原生JavaScript实现换肤
Feb 19 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
神族 Protoss 历史背景
2020/03/14 星际争霸
PHP求最大子序列和的算法实现
2011/06/24 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
json的前台操作和后台操作实现代码
2012/01/20 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
js对象的复制继承实例
2015/01/10 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
pytorch SENet实现案例
2020/06/24 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
英语生日邀请函
2014/01/23 职场文书
卫生系统先进事迹
2014/05/13 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang