图片自动缩小的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 相关文章推荐
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
Javascript的表单验证长度
Mar 16 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
原生js实现放大镜
Feb 20 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
原生JS实现日历组件的示例代码
Sep 22 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
[原创]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安全编程之加密功能
2006/10/09 PHP
PHP入门
2006/10/09 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
python写入已存在的excel数据实例
2018/05/03 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
python使用selenium实现批量文件下载
2019/03/11 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
Hotels.com印度:酒店预订
2019/05/11 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
机械电子工程毕业生自荐信
2013/11/23 职场文书
自我评价范文分享
2014/01/04 职场文书
公司成立感言
2014/01/11 职场文书
商场拾金不昧表扬信
2014/01/13 职场文书
医药销售求职信范文
2014/02/01 职场文书
家长写给老师的建议书
2014/03/13 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
Python开发五子棋小游戏
2022/04/28 Python