入门话题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
 3 function 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. 物理上把图片变小，效果如何？

转载于:https://www.cnblogs.com/suryani/archive/2007/08/15/854832.html