img{  
    width: auto;  
    height: auto;  
    max-width: 100%;  
    max-height: 100%;     
}

img 按父容器宽度自动缩放，并且保持图片原本的长宽比  

<div style="width:50px;height:40px">
  <img src="a.jpg">
  <!--这里我们假如图片的实际尺寸是320X320-->
</div>

实际尺寸会是: {height:40px; width:40px}
可单独设置width 或者height ,图片保持等比例缩放.
也可以通过js的onload来解决问题

<script>

 function changeImg(o, w, h){    //w:max-width; h:max-height    

 var p = w*1.0/h,    

    w1 = o.width, h1=o.height,       

 p1=w1*1.0/h1;  

  if(p1>p){//使用w        

o.width = w;       

 o.height = h1*w/w1;   

 }else{//使用h       

 o.height = h;       

 o.width = w1*h/h1    } }

 </script>

<img src='' onload="changeImg(this,200,100)" />

牧飞