图片自动缩小的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操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 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 $_FILES函数详解
2011/03/09 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
微信小程序版翻牌小游戏
2018/01/26 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
python文字转语音实现过程解析
2019/11/12 Python
通过Python实现一个简单的html页面
2020/05/16 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
餐饮主管岗位职责
2013/12/10 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
python绘制箱型图
2021/04/27 Python
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫