css图片按比例缩放不变形

设置对应图片的width和htight的具体数值，img{width:auto;height:auto;max-width:100%;max-height:100%;},这样设置图片可以使图片在指定的空间内缩放。

举例：

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

这时图片缩放后再div中的尺寸是：

width:90px;（因为图片的width:100%）

height:90px（这里height是在width:100%被缩放后的尺寸。）

我们可以发现这个90px的高度仍然超出了div的60px的高度,不符合max-height

这个时候，max-height:100%;就会发挥作用，

在max-height:100%;的作用下，图片被缩放后在div的尺寸是：

width:60px;

height:60px;

这个尺寸符合max-height和max-width

实现图片比例缩放，就是不超出DIV设定的高宽显示等比例图片