如何用polyfill制作响应式图片轮播

强大的<picture>标签配合polyfill实现响应式轮播图效果

<div class="ad">
<div class="owl-carousel owl-theme">
<div class="item">
<picture>
<source srcset="img/ad001-l.png" media="(min-width:50em)">
<source srcset="img/ad001-m.png" media="(min-width:30em)">
<img src="img/ad001.png" alt="2015年度报告">
</picture>
</div>
<div class="item">
<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>
</div>
<div class="item">
<picture>
<source srcset="img/ad003-l.png" media="(min-width:50em)">
<source srcset="img/ad003-m.png" media="(min-width:30em)">
<img src="img/ad003.png">
</picture>
</div>
</div>
</div>

<source>配合srcset 和媒体查询来实现响应式的轮播图的开发，picturefill.js用来抹平不支持picture标签浏览器的坑。