响应式图片<picture>标签兼容处理(IE9)

通常我们在进行响应式网站开发的时候，需要对图片进行响应式处理，而IE 9并不能识别<picture></picture>中的<source>标签(让图片自适应)，所以为了兼容IE9，可以这么写:

<picture>  <!--[if IE 9]><video style="display: none;"><![endif]-->  <source srcset="examples/images/extralarge.jpg" media="(min-width: 768px)">  <source srcset="examples/images/large.jpg" media="(min-width: 300px)">  <!--[if IE 9]></video><![endif]-->  <img srcset="examples/images/medium.jpg" alt="…"></picture>

图片等比缩放、占位(用作图片容器，空间先占下来，即使图片还没显示)

@mixin image-box($width, $height) {    position: relative;    display: block;    margin: 0 auto;    max-width: $width;    height: 0;    padding-bottom: ($height / $width) * 100%;    overflow: hidden;}

 @include image-box(400px, 300px);