网络编程
位置：首页>> 网络编程>> JavaScript>> 整理各种js按比例缩放图片方法（2）

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



第一页 上一页 1
2
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com