按比例自动缩放图片的大小

转载 2013年12月03日 15:57:40

1、简单的按比例缩放图片:

    设置好图片的宽度,图片就会自动缩放高度。比如:<img src="http://img93.pp.sohu.com/images/blog/2006/10/21/17/7/10efe26831e.jpg" onload='javascript:if(this.width>180)this.width=180' alt="用户头像" />

或者:

if(width>164){
   imgObj.width=164;
   imgObj.height=imgObj.height/(imgObj.width/164);
 }

    缺点就是不能控制高度。

2、完全可控制的按比例缩放图片:

    function ResizeImage(obj, MaxW, MaxH) {

if (obj != null) imageObject = obj;

var state=imageObject.readyState;

if(state!='complete') {

setTimeout("ResizeImage(null,"+MaxW+","+MaxH+")",50);

return;

}

var oldImage = new Image();

oldImage.src = imageObject.src;

var dW=oldImage.width;

var dH=oldImage.height;

if(dW>MaxW || dH>MaxH)

{ a=dW/MaxW; b=dH/MaxH; if(b>a) a=b; dW=dW/a; dH=dH/a; }

if(dW > 0 && dH > 0)

{ imageObject.width=dW; imageObject.height=dH; }

}

    调用方法:<img oncontextmenu="return false;" id="photoImg" name="photoImg" src="images/images.gif" onclick="openPicWin(this.src)" onload="ResizeImage(this,400,253);">

    ResizeImage(this,400,253)调用中 this是图片的路径,400和253分别是自己设定的宽度和高度。如果宽度<400,高度<253,图片就显示原来的大小。相反如果图片宽度>400图片宽度就缩小到400,这个时候如果高度>253图片会继续按比例缩放,直到进入到400和253的范围之内。

相关文章推荐

js 最完美解决 图片在图片框内按宽高比例自动缩放

/******最完美解决 图片在图片框内按宽高比例自动缩放!!!***/ //Img:要放图片的img元素,onload时传参可用this //maxHeight ...

按比例自动缩放组件的面板

  • 2012年11月02日 18:16
  • 373KB
  • 下载

C# Winform根据屏幕大小自动缩放

1  Form基类 using System; using System.Collections.Generic; using System.ComponentModel; using System....
  • taoerit
  • taoerit
  • 2016年07月15日 13:49
  • 1943

基于mfc的对话框编程中,实现控件随对话框大小自动缩放以及通过滚动条实现控件移动功能

1.在OnInitDialog中加入初始化垂直和水平滚动条的属性:     SCROLLINFO vinfo;     vinfo.cbSize = sizeof(vinfo);     v...

javascript 图片自动缩放

  • 2012年02月27日 16:27
  • 187KB
  • 下载

JS自动缩放页面图片

注:该方法不适用于图片较多的页面! /** * 缩略图 * * @param bool isScaling 是否缩放 * @param int width 宽度 * @param int ...

HTM5网页图片自动缩放

  • 2015年12月25日 15:32
  • 3.11MB
  • 下载

在图片上添加自动缩放的标签

  • 2017年03月03日 17:50
  • 39.66MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:按比例自动缩放图片的大小
举报原因:
原因补充:

(最多只允许输入30个字)