• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • <picture>

    版本:HTML5

    HTML <picture>元素通过包含零或多个<source>元素和一<img>元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子<source>元素,如果没有匹配的,就选择<img>元素的 src 属性中的URL。然后,所选图像呈现在<img>元素占据的空间中。

    浏览器支持

    只有IE浏览器不支持,其余浏览器都支持<picture>

    示例

    <!--Change the browser window width to see the image change.-->
    
    <picture>
        <source srcset="/media/examples/surfer-240-200.jpg" media="(min-width: 800px)">
        <img src="/media/examples/painted-hand-298-332.jpg" />
    </picture>
    
    <style>
    footer {
        font-size: .8rem;
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
    
    .output {
        background: #eee;
        position: relative;
    }
    </style>
    

    用法提示

    你可以使用object-position属性调整元素框架内图像的位置,用object-fit属性控制图片如何调整大小来适应框架。

    提示:在子<img>元素上使用这些属性,不是<picture>元素。

    要决定加载哪个URL,user agent检查每个<source>srcsetmediatype属性,来选择最匹配页面当前布局、显示设备特征等的兼容图像。

    <picture>的常见使用场景:

    • 艺术指导(Art direction)——针对不同media条件裁剪或修改图像
    • 遇到所有浏览器都不支持的特定格式时,提供不同的图像格式

    如果为高DPI(Retina)显示提供更高密度版本的图像,请改用<img>元素上的srcset。这允许浏览器在数据保存模式下选择低密度版本,而不必编写显式的媒体条件。

    内容分类流内容,表述内容,嵌入内容。
    允许的内容零或多个<source>元素,以及紧随其后的一个<img>元素,可以混合一些脚本支持的元素。
    标签省略不允许,开始标签和结束标签都不能省略。
    允许的父元素任何可以包含嵌入内容的元素。
    允许的 ARIA roles
    DOM 接口HTMLPictureElement

    HTML 4.01 与 HTML5 之间的差异

    <picture>属性是 HTML5 新定义的。

    属性

    这个元素只包含全局属性。

    全局属性

    <picture>标签支持 HTML 的全局属性。

    事件属性

    <picture>标签支持 HTML 的事件属性。

    示例

    这些示例演示了<source>元素的不同属性如何更改<picture>中图像的选择。

    media属性

    media属性允许你提供一个用于给用户代理作为选择<source>元素的依据的媒体条件(media condition)(类似于媒体查询)。如果这个媒体条件匹配结果为false,那么这个<source>元素会被跳过。

    <picture>
      <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
      <img src="mdn-logo-narrow.png" alt="mdn">
    </picture>
    

    type属性允许你为<source>元素的srcset属性指向的资源指定一个MIME 类型。如果用户代理不支持指定的类型,那么这个<source>元素会被跳过。

    <picture>
      <source srcset="mdn-logo.svg" type="image/svg+xml">
      <img src="mdn-logo.png" alt="mdn">
    </picture>
    

    上篇:<param>