HTML 参考手册

HTML 标签大全

HTML: <picture> 元素

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

示例

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(cainiaoplus.com)</title>
</head>
<body>
<h2>picture 元素</h2>
<picture>
  <source media="(min-width: 650px)" srcset="/run/html/views.png">
  <source media="(min-width: 465px)" srcset="/run/html/default.jpg">
  <img src="/run/html/haha.gif"  style="width:auto;">
</picture>
</body>
</html>
测试看看 ‹/›

定义

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

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

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

注意:        

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

浏览器支持

表格中的数字表示支持该元素的第一个浏览器版本号。

IEFirefoxOperaChromeSafari

HTML 4.01 与 HTML5 之间的差异

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

全局属性

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

事件属性

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