Question

如何用JS固定图片大小

跪求各位帮帮忙,小弟没分了,希望大家帮帮我,问题如下:
第一,我原先显示图片的方式,是用ASP读取NEWS这个表中content里的内容，图片的显示方式则是用“鼠标滚轮来缩放图片大小”代码如下：<script language=javascript>
function img_zoom(e, o) //图片鼠标滚轮缩放
{
var zoom = parseInt(o.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
if (zoom > 0) o.style.zoom = zoom + '%';
return false;
}
</script>
调用的代码是：<%if mouse_wheel_zoom="on" then
News_Content=replace(News_Content,"<IMG","<IMG onmousewheel='return img_zoom(event,this)' onload='javascript:if(this.width>screen.width-333)this.width=screen.width-333'",1,-1,1)
end if %>

问题来了，用这种方法虽然可以用鼠标滚轮滚动图片大小，但是当插入1280*800的图片，一打开，因为图片太大了，图片一打开，只有显示一小部分，每次都要用鼠标滚轮滚到合适的大小才能看到全部。

我的问题如下：请高手帮我改改这段代码，能不能加个什么函数，让图片一打开不要原始大小，比如说，一打开的时候就限定图片 缩放到宽：100 高：100这样控制图片的初始化大小。。。。
跪求高手帮忙，谢谢你们了，祝你们全家发财，全家幸福，全家开心，我真的没有分了，有分我一定会全部送上的。

Answer 1

添加一个函数，onload执行
<script language="javascript" type="text/javascript">
function showPic(which){
var currImg=document.getElementById("as");//as是你的IMG的id
var myImg=new Image();
var source=which.getAttribute("href");
//定义图像对象，获取宽高
myImg.setAttribute("src",source);
var w=myImg.width;
var h=myImg.height;
//利用获取的宽高等比缩放显示，如果宽高小于100则显示原图大小
if(w>h){
currImg.setAttribute("width","100px");
currImg.setAttribute("height",h/w*100);
}else if(h>w){
currImg.setAttribute("height","100px");
currImg.setAttribute("width",w/h*100);
}
}
function img_zoom(e, o) //图片鼠标滚轮缩放
{
var zoom = parseInt(o.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
if (zoom > 0) o.style.zoom = zoom + '%';
return false;
}
</script>

<%if mouse_wheel_zoom="on" then
News_Content=replace(News_Content,"<IMG","<IMG id='as' onmousewheel='return img_zoom(event,this)' onload='showPic(this);'",1,-1,1)
end if %>

Answer 2

这种情况用CSS来控制最合适。例如你想让初始图片显示为100px*100px，则：

<img src="images/pic.png" width="100" height="100" />

或者：

<img src="images/pic.png" style="width:100px; height:100px" />

当页面中图片非常多，且要求每张图片的大小依据其父容器来固定怎么办？可以使用max-weight：

img {max-weight:100%;}

这样图片会自动缩放到和其父容器等宽。