响应式图片三 通过size解决srcset坑

上篇博客我们讲到，用srcset来实现响应式图片，但srcset方法有个坑(不管图片外边的容器宽度是多少都会以百分百视口宽度去显示)，需要配合size来跳过坑；size默认值为100vw–>viewport width意思是百分百视口宽度；size的值设置：xxvw;具体实现代码如下

<img class="image" src="img/480.png"
srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"
sizes='(min-width:800px) 800px,100vw'>

这个代码的意思是，在最小像素是800px的情况下，这个图片的预估宽度是800px， 其他情况下都是100%的视口宽度这种情况下再放大，1600尺寸的图片也不会加载注意中间的空格。

另外，介绍另外一种实现响应式图片的方法。通过上面那种方法，实现自适应图片时，当由分辨率较大切换到分辨率较小时，还会加载大分辨率情况下的图片，而如果这张图片非常长，或者非常宽，那么在较小分辨率要完全显示这张图片的效果就不是很好。这个时候我们就可以使用标签来实现。具体代码如下

 <picture>
                    <source srcset="img/ad002-l.png" media="(min-width:50em)">
                    <source srcset="img/ad002-m.png" media="(min-width:30em)">
                    <img src="img/ad002.png" alt="新年红包">
                </picture>

picture元素来获得更多的浏览器权限，原先的是控制一个img标签下的图片大小，picture通过一步一步查找里面的来控制更多屏幕宽度下的图片大小。