一旦你引用了你的图像，你可以像这样设置它的高度和宽度：

var yourImg = document.getElementById('yourImgId');
if(yourImg && yourImg.style) {
    yourImg.style.height = '100px';
    yourImg.style.width = '200px';
}

在 html 中，它看起来像这样：

<img src="src/to/your/img.jpg" id="yourImgId" alt="alt tags are key!"/>

您可以像这样更改实际的宽度/高度属性：

var theImg = document.getElementById('theImgId');
theImg.height = 150;
theImg.width = 150;

如果要在加载图像后调整大小，可以附加到标签的onload事件<img>。请注意，并非所有浏览器都支持它（Microsoft 的参考声称它是 HTML 4.0 规范的一部分，但HTML 4.0 规范未列出 的onload事件<img>）。

下面的代码已经过测试和工作：IE 6, 7 & 8, Firefox 2, 3 & 3.5, Opera 9 & 10, Safari 3 & 4 and Google Chrome:

<img src="yourImage.jpg" border="0" height="real_height" width="real_width"
    onload="resizeImg(this, 200, 100);">

<script type="text/javascript">
function resizeImg(img, height, width) {
    img.height = height;
    img.width = width;
}
</script>

更改图像很容易，但是更改后如何将其更改回原始大小？您可以尝试将文档中的所有图像更改回原始大小：

var i,L=document.images.length;
for(i=0;i<L;++i){
 document.images[i].style.height = 'auto'; //设置CSS值
 document.images[i].style.width = 'auto'; //设置CSS值
// document.images[i].height = ''; （不需要这个，会设置 img.attribute）
// document.images[i].width = ''; （不需要这个，会设置 img.attribute）
}

你可以在这里看到结果 在这些简单的代码块中，你可以改变图像的大小，当鼠标进入图像时使它变大，当鼠标离开时它会恢复到原来的大小。

html：

<div>
<img  onmouseover="fifo()" onmouseleave="fifo()" src="your_image"   
       width="10%"  id="f" >
</div>

js文件：

var b=0;
function fifo() {
       if(b==0){
            document.getElementById("f").width = "300";
           b=1;
          }
       else
          {
         document.getElementById("f").width = "100";
          b=0;
        }
   }