在开发自适应和响应式网页的时候，图片是个头疼的，既要尽量保证原来的大小，不失真。又要图片不能超过各设备下的容器大小。

其实很简单

img标签自适应响应式css写法：

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

这样设置图片的话，可以使图片在指定的空间内缩放，又尽量保证原图片大小。

4行代码的意思是：

• width:auto;图片的宽度自己适应(图片有多宽就显示多宽)

• height:auto;图片的高度自己适应(图片有多高就显示多高)

• width:auto;和height:auto;一起使用就代表着显示图片的原始尺寸(可以理解为没有什么作用)

• max-width:100%;图片的宽度不能超过图片所在的空间的宽度

• max-height:100%;图片的高度不能超过图片所在的空间的高度

• max-width:100%;max-height:100%;一起使用就代表这图片的宽高尺寸最大不能超过它所在的空间的宽高。

max-width 和 max-height，优先对max-width进行缩放，当图片在max-width缩放后的尺寸仍然超出容器大小时。max-height就发挥了作用，对图片再次进行缩放！