入门话题1. 在Web中控制图的显示外观？把一张500*800 的图, 显示成180*110 的小图.

问题： 在web中，如何把一张500*800 的图, 显示成180*110 的小图？
方法:  a.  利用脚本控制. 在onload 里加个函数.  

 1<img src ="Image/3pic2.gif" style="border: 0" width ="180" onload="DrawImage(this);" />< script type="text/javascript"> 
 2
 3function DrawImage(ImgD){ 
 4    var image=new Image(); 
 5    image.src=ImgD.src; 
 6    alert(image.width/image.height);
 7    if(image.width>0 && image.height>0){
 8      if(image.width/image.height>= 180/110){ 
 9           if(image.width>180){
10            ImgD.width=180; 
11            ImgD.height=image.height*110)/image.width; 
12           }else{ 
13            ImgD.width=image.width;
14            ImgD.height=image.height; 
15           } 
16       /*ImgD.alt="bigpic"  */
17      } 
18      else{ 
19           if(image.height>110){
20            ImgD.height=110; 
21            ImgD.width=(image.width*110)/image.height; 
22           }else{ 
23            ImgD.width=image.width;
24            ImgD.height=image.height; 
25           } 
26        /*ImgD.alt="bigpic"  */ 
27     } 
28  }
29}
30</ script >
31

注意,这里设计 width="180", 注意这里最好限定, 如果不限定加载图时会生成原来大小的图,然后再缩小 .载入

            时屏幕会闪动
 
 

  b. 利用CSS 控制
      

1  img{
2              max-width:40px; //IE7 Firefox
3              with:express(this>500) 40px //IE6 
4               over-flow:hidden; 
5         }        

讨论的话题： 1. 页面的大小有变小吗？页面加载速度呢？
                         2. 物理上把图片变小，效果如何？