整理各种js按比例缩放图片方法(2)

来源:仰天一笑的blog 时间:2007-09-27 20:01:00 

按比例缩放的,分享一个我(星期零)写的


<script language="javascript">
function changeImg(mypic){
var xw=160;
var xl=180;
var width = mypic.width;
var height = mypic.height;
var bili = width/height;
var A=xw/width;
var B=xl/height;
if(!(A>1&&B>1))
{
if(A<B)
{
mypic.width=xw;
mypic.height=xw/bili;
}
if(A>B)
{
mypic.width=xl*bili;
mypic.height=xl;
}
}
}
</script>
<img src="sh180.jpg" onload="changeImg(this)">


不过后来发现,只要在img中只指定一个width或者一个height属性,可以自动实现按比例缩放,如: 


<img src="sh180.jpg" width="100" />


,这样的话就可以固定宽为100,然后高按比例自动缩放了。

下面这种方法在IE、FIREFOX、OPERA、NETSCAPE测试都适用(by@蛐蛐):

function SetSize(obj, width, height)
{
myImage = new Image();
myImage.src = obj.src;
if (myImage.width>0 && myImage.height>0)
{
var rate = 1;
if (myImage.width>width || myImage.height>height)
{
if (width/myImage.width<height/myImage.height)
{
rate = width/myImage.width;
}
else
{
rate = height/myImage.height;
}
}
if (window.navigator.appName == "Microsoft Internet Explorer")
{
obj.style.zoom = rate;
}
else
{
obj.width = myImage.width*rate;
obj.height = myImage.height*rate;
}
}
}


用法:

<img src="img/offer/41936519.jpg" border="0" style="zoom: 0.1" onload="SetSize(this, 80, 60)"/> 



标签:缩放,图片,比例
0
投稿

猜你喜欢

  • 未知高度的图片垂直居中

    2010-12-17 12:36:00
  • 网页中英文混排行高不等问题

    2008-08-26 17:03:00
  • 使用XMLhttp生成html页面

    2007-08-17 11:21:00
  • 巧用一条SQL 实现其它进制到十进制转换

    2009-01-19 13:16:00
  • Oracle数据仓库的分层管理器解决方案开发者网络Oracle

    2010-07-16 13:08:00
  • 使用DIV+CSS设计网页的好处

    2007-10-14 15:02:00
  • 网页布局的位置重心与位置间的对比关系

    2007-10-15 19:20:00
  • 鼠标驱动图片变化

    2009-07-26 10:03:00
  • 用一条SQL实现:一行多个字段数据的最大值

    2008-12-31 13:37:00
  • 13家著名科技公司logo标识来历及演变

    2008-02-19 16:42:00
  • 加固SQL参数与存储过程

    2012-03-12 19:44:08
  • mysql int范围与最大值分析

    2012-03-26 18:24:00
  • 当标题不能显示完整的时候

    2007-11-20 13:23:00
  • MYSQL教程:保证安全的备份MYSQL数据库的方法

    2010-03-03 17:12:00
  • 用一个例子来认识innerText,innerHTML

    2007-12-24 17:17:00
  • 如何编写一个过滤掉HTML代码的函数?

    2009-11-08 18:53:00
  • Oracle数据库处理多媒体信息

    2010-07-16 13:01:00
  • ASP 多关键词查询实例代码

    2011-04-11 11:14:00
  • JavaScript动态调整图片尺寸

    2009-11-23 12:20:00
  • 如何让用户再次访问我的网站时不需再提交相关信息?

    2010-05-16 15:05:00
  • asp之家 网络编程 m.aspxhome.com