响应式设计中的响应式图片制作

两种方法实现响应式图片：

1. <picture>
2. <img>

在该两个标签中使用srcset和sizes属性，如：

<article>

    <img  src="small.png"

          srcset="large.png 1280w, medium.png 640w, small.png 320w"

          sizes="(man-width:500px) 700x, 100vm" 

          alt="Alternate text" />

</article>

配合的css如下

article{

    margin: 0 auto;

    max-width: 700px; 

}

@media (max-width: 500px) {

  img {width: 250px }
 }

<picture>

   <source media="(min-width: 36em)"

           srcset="large.jpg  1024w,

                   medium.jpg 640w,

                   small.jpg  320w"

           sizes="33.3vw" />

   <source srcset="cropped-large.jpg 2x,

                   cropped-small.jpg 1x" />

   <img src="small.jpg" alt="A rad wolf" />

</picture>

转载摘抄翻译自：

• http://css-tricks.com/video-screencasts/133-figuring-responsive-images/?utm_source=dlvr.it&utm_medium=twitter
• http://scottjehl.github.io/picturefill/
• http://martinwolf.org/2014/05/07/the-new-srcset-and-sizes-explained/
• http://ericportis.com/posts/2014/srcset-sizes/