当我们一个项目有万千上百的产品图片展示的时候,图片显示的比例是个大问题. 美工不可能空到把所有图片去处理一圈全部按网站某个比例调整.这是一个大大的工程. 所以我们的css这个时候就可以上场了. 

    设置对应图片的width和htight的具体数值就可以了。举例一个：
img{
 width:auto;
 height:auto;
 max-width:100%;
 max-height:100%;
}
这样设置图片的话，可以使图片在指定的空间内缩放。
举例：
<div style=\"width:50px;height:40px\">
  <img src=\"a.jpg\">
  <!--这里我们假如图片的实际尺寸是320X320-->
</div>
根据上面4个css可以知道：

图片被缩放后在div的尺寸是：
width:50px;（因为图片的width:100%）
height:50px（这里height是在width:100%被缩放后的尺寸。）
我们可以发现这个50px的高度仍然超出了div的40px的高度,不符合max-height
这个时候，max-height:100%;就会发挥作用，
在max-height:100%;的作用下，图片被缩放后在div的尺寸是：
width:40px;
height:40px;
这个尺寸符合max-height和max-width

这是百度问答的一个回答, 我只想说二个字. 完美!