<picture>标签实现响应式图片

来源:互联网 发布:windows程序编程 pdf 编辑:程序博客网 时间:2024/06/06 02:43
  • 一个picture标签里面可以包含多个source标签,每个source标签里可以使用媒体查询和设置srcset属性,浏览器会遍历picture标签中的每个source标签,根据当下的情况,找到最合适的srcset,然后来设置img标签的src属性。
<div class="slider-img">    <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="广告图片">    </picture></div>
  • 注意:兼容性较差,配合picturefill插件来使用

  • picturefill 官方

  • picturefill github

0 0