整理各种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