转自:http://hi.baidu.com/crystalhx/blog/item/deba9b2320274340ac34de09.html

图片自动缩放 js图片缩放
2008-03-27 10:48

图片自动缩放 js图片缩放

对于不指定大小的图片默认是以原大小显示,所以在不指定大小的图片上用onload事件触发脚本代码,在代码中判断图片的尺寸,如果超过指定值,将自动设置为允许的最大值。

具体步骤:
方法一:在图片加载完毕后用onload句柄触发执行脚本,重设图片的宽度为图片宽度和300两者的最小值。
代码示例: <img src="demo.gif" οnlοad="if(this.width>300)this.width=300">
或者
<img src="demo.gif" οnlοad="this.width=Math.min(this.width,300)">

方法二:按比例缩小。只需要把js加在head之间,再在body处加入οnlοad="ResizeImages();"代码。
<script language="JavaScript">
<!--
function ResizeImages()
{
var myimg,oldwidth;
var maxwidth=180; //缩放系数
for(i=0;i <document.images.length;i++){
myimg = document.images[i];
if(myimg.width > maxwidth)
{
oldwidth = myimg.width;
myimg.width = maxwidth;
myimg.height = myimg.height * (maxwidth/oldwidth);
}
}
}
//-->
</script>

<script language="JavaScript">
<!--
//图片按比例缩放
var flag=false;
function DrawImage(ImgD,iwidth,iheight){
//参数(图片,允许的宽度,允许的高度)
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
//-->
</script>

调用:<img src="data:images/toplogo.gif" οnlοad="javascript:DrawImage(this,100,100)">

转载于:https://www.cnblogs.com/xjyggd/archive/2008/11/07/1328886.html

[转]图片自动缩放 js图片缩放相关推荐

  1. html5+实现图片自动切换,js图片自动切换效果处理代码

    var curIndex=0; //时间间隔 单位毫秒 var timeInterval=1000; var arr=new Array(); arr[0]="1.jpg"; ar ...

  2. html5表格图片按比例缩放,JS图片等比例缩放方法完整示例

    本文实例讲述了JS图片等比例缩放方法.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional ...

  3. html 图片自动大小,css图片自适应_用css让图片自动适应大小

    摘要 腾兴网为您分享:用css让图片自动适应大小,政务易,悦读小说,优学堂,悟空识字等软件知识,以及小伴龙,水彩笔刷,昕薇,八门,暴雪战网app,我的世界启动器,中税网继续教育,湖南文交所,我的世界头 ...

  4. html页面图片自动缩放比例,html 图片按比例缩放

    声明:本文章摘自网上一位友人的,但由于意外,网页被关闭,没有及时记录他的信息,如有发现原作者,请告知,本人尽快将原作者以及原文章地址补充进来 .thumbnail{overflow:hidden;wi ...

  5. H5图片切换,js图片轮播,js图片自动切换

    没有插入图片,效果如下: 注意:下面代码为PC端显示样式,如果要放在手机端,需要微调下style #wrapper.#banner..bg width 自行修改,我的手机端iphone5s 为 wid ...

  6. 图片阴影html,js图片彩色阴影特效插件

    image-shadow.js是一款用于制作图片彩色阴影特效的js插件.它通过CSS3 filter过滤器来生成图片对应颜色的阴影效果. 注意,IE浏览器和Edge浏览器不支持该图片彩色阴影特效. 使 ...

  7. 如何让图片自动旋转html5,图片旋转特效 纯HTML5+CSS3制作图片旋转

    transform的四个属性: ①旋转--->rotate(参数a),单位deg,表示旋转角度,正数顺时针,负数逆时针. ②缩放--->scale(参数a),单位1,也就是"没有 ...

  8. php 图片渲染,vue.js图片怎么渲染

    vue.js渲染图片的方法:首先初始化列表:然后获取上个页面带过来的参数,获取api,app,foot:接着向后传递参数:最后渲染本地图片. [相关文章推荐:vue.js] vue.js渲染图片的方法 ...

  9. html图片自动适应盒子,图片尺寸自动适应div(div控制图片大小自适应)

    全部代码: htmlPUBLIC"-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/D ...

最新文章

  1. ROS系统——roslaunch发布4个realsense相机的4种方法
  2. java算法----排序----(6)希尔排序(最小增量排序)
  3. SAP WM中阶Storage Type的Capacity Check – Check based on maximum quantity per bin in storage type.
  4. 百度文本审核api_利用百度ai实现文本和图片审核
  5. Scapy 伪造网络数据包
  6. jsp mysql utf-8 中文乱码_jsp插入mysql数据库显示中文乱码问题
  7. cocos2d-lua 搓牌效果_4款热门面霜评测,欧莱雅效果一般,艾珂薇性价比高,菲洛嘉最贵...
  8. java 多线程下载文件并实时计算下载百分比(断点续传)
  9. Jenkins修改管理员密码
  10. BOOTSTRAP ---- 重要部分
  11. JMS Helloworld
  12. NYOJ-单调递增最长子序列(dp)
  13. BFC的作用以及原理介绍
  14. BZOJ3437:小P的牧场(斜率优化DP)
  15. 关于Executors.newFixedThreadPool何时创建新线程
  16. Stream Processing With Flink (7) 状态算子和用户函数
  17. 【控件】mars3d控件的设置
  18. 世界上最好用的截图工具 吸色工具 Snipaste
  19. 优秀的程序员是如何利用工具来提升工作效率的?
  20. 信用飞疑似信息泄露致用户被骗近4万元,平台借款利率高达75%

热门文章

  1. IntelliJ IDEA 2017.3.2 热加载(Hot Swap)
  2. Python安装时我遇到的一些问题
  3. 数据结构-王道2017-第3章 栈和队列-队列
  4. 【LINUX】——linux如何使用Python创建一个web服务
  5. 启动和停止MySQL服务
  6. Android开发之android_apk 在线安装(源代码分享)
  7. Activity栈管理(一):Activity任务栈模型
  8. Handler消息机制(一):Linux的epoll机制
  9. (AOSP)repo checkout指定版本
  10. View事件分发机制(源码分析篇)