首页 网络技术
  1. 正文

HTML picture元素如何定义

    HTML<picture>元素

    实例

    根据屏幕匹配的不同尺寸显示不同图片,如果没有匹配到或浏览器不支持picture属性则使用img元素:

<picture>

  <source media="(min-width: 650px)" srcset="demo1.jpg">

  <source media="(min-width: 465px)" srcset="demo2.jpg">

  <img src="img_girl.jpg">

</picture>

    定义

    picture元素允许我们在不同的设备上显示不同的图片,一般用于响应式。

    HTML5引入了<picture>元素,该元素可以让图片资源的调整更加灵活。

    <picture>元素零或多个<source>元素和一个<img>元素,每个<source>元素匹配不同的设备并引用不同的图像源,如果没有匹配的,就选择<img>元素的src属性中的url。

    注意:<img>元素是放在最后一个<picture>元素之后,如果浏览器不支持该属性则显示<img>元素的的图片。

    HTML4.01与HTML5之间的差异

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

    全局属性

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

    事件属性

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

本文标题:HTML picture元素如何定义
本文链接:https://www.qqooo.cn/post/6445.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!