img响应式图片

一、什么是响应式图片？

根据不同的屏幕分辨率，和设备像素比来尽可能选择高分辨率的图片。
或者换个角度来说，当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽啦。
1
2
1、同样是普通屏幕（相对与retain等高清屏幕而言）上，在手机屏幕上显示小图片，在电脑浏览器上显示大图片。
2、同样大小的屏幕上，普通设备上显示普清图片，高清屏幕（如 retain屏幕）的设备上显示高清图片。

二、如何实现响应式图片？

1、使用一张图片+css样式

<div style="text-align: center" style="width: 100%">  
     <img src="css/a.png" style="width: 80%">  
</div>  

这样图片始终保持在频幕居中位置，且长度为外层div的80%宽

2、多张图片
上面那种方式，如果图片被拉伸过大会导致图片不清楚，影响用户体验。所以我们可以提供多张图片让浏览器选择最合适的。
2.1 采用媒体查询的方式

@media only screen and (max-width : 512px) {
    .img { background-image: url(sunset-small.jpg); }
}
@media only screen and (max-width : 1024px) {
    .img { background-image: url(sunset-large.jpg); }
}

only ：只针对，同类的有all media（所有设备）
screen：适应计算机彩色屏幕，同类的还有print（适应打印预览模式下查看的内容或者打印机打印的内容）
and：与条件 同类有or
max-width ：1024px 适应浏览器的最小宽度为 1024 像素，同类还有（指定min-width，width）
符合以上条件，则使用大括号里的样式

2.2 html 的

srcset和sizes是HTML5新支持的属性，浏览器支持情况如下：
http://caniuse.mojijs.com/Home/Html/item/key/srcset/index.html

<img class="image"  src="mm-width-128px.jpg"
     srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w"
     sizes="(max-width: 360px) 340px, 128px">

src：当设备不支持srcset，sizes属性时，使用这个图片
srcset: 列出图片资源
例如mm-width-128px.jpg 128w 代表图片是mm-width-128px.jpg 128px宽的图片，规格是128w。
128w的单位w是文件尺寸单位，一般128px宽度就写128w，如果是128px宽度的图片是png24无损图片，或100%质量JPG图片，则规格定为256w（即128*2）
sizes：用来表示尺寸临界点。
语法如下：
sizes=”[media query] [length], [media query] [length] … etc”
例如

size = “(max-width: 360px) 340px”

Eg (max-width: 360px)是媒体查询，表示当视图宽度不大于360px时，图片的宽度限制为340像素（这个宽度指的是css指定的图片大小，也称为渲染尺寸），当设备像素比是1的时候，应该使用大于等于340w规格的图片，所以浏览器会选择mm-width-512px.jpg
当设备像素比是2的时候，应该使用大于等于3402=680w规格的图片
为什么呢？因为设备像素比是2，代表设备放2个像素点，但实际我们看到的宽度只有一个像素，也就是设备上正常显示1个像素大小需要2个像素点，这就是高清的由来，相当于图片压缩了。可是srcset里没有大于等于680w的图片，浏览器只有尽量选择高清的图，即mm-width-512px.jpg。
Eg 当视觉宽度为400px（>360px），图片的宽度限制为128像素
设备像素比为1时，选择>=128w规格的图（即mm-width-128px.jpg）
设备像素比为2时，选择>=1282w(图片限制的宽度*设备像素比），规格的图片即mm-width-256px.jpg ，设备像素比为3时，选择512w规格的图,设备像素比为4时，选择640w规格的图（可以没有提供，于是选择了512w的图）

sizes=”(max-width: 360px) calc(100vw - 20px) “
代表：当视图宽度不大于360px时，应该使用大于100%视觉宽度-20px的规格的图片
（注：vw代表视觉宽度的百分比）
Eg 当视觉宽度为250px，设备像素比为1时，，图片的宽度限制为（250px-20px）=230px，
设备像素比为1，选择规格230w以上的图片，所以应该选mm-width-256px.jpg这张图来显示
设备像素比为2，选择230*2w以上的图片，所以选择mm-width-512px.jpg这张图来显示