响应式图片<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);

4000