HTML <picture>标签
HTML <picture>标签作用
HTML <picture>标签用于响应式网页设计,我们需要根据其视口,高度,宽度,方向,和像素密度。
<picture>标签包含一个或多个<source>元素和一个<img>元素。
根据视口,匹配的图像将从不同的<picture>加载标签,并且如果没有源包含匹配的图像,则<img>标签中存在的默认图像将显示在浏览器上。
此标签是HTML5中的新标签。
语法
<picture>
<source srcset="" media="">
<img src="">
</picture>
以下是有关HTML <picture>标签的一些规范
显示 |
内联 |
开始标签/结束标签 |
开始标签和结束标签 |
用法 |
图片 |
示例
<!DOCTYPE html>
<html>
<head>
<title>Picture Tag</title>
<style>
body{
text-align: center;
}
p{
font-size: bold;
font-size: 20px;
color: green;
}
</style>
</head>
<body>
<h2>Example of picture tag</h2>
<p>Resize the page to see the different versions of the images at different viewports, and as per viewport image will be automatically changed.</p>
<picture>
<source srcset="download1.jpg" media="(min-width: 750px)">
<source srcset="pic2.jpg" media="(min-width: 450px)">
<img srcset="rose.jpg" alt="default image" style="width: auto;">
</picture>
</body>
</html>
输出:
属性:
标签专用属性:
属性 |
值 |
说明 |
media |
media_query |
它定义并接受可以在CSS中定义的任何媒体查询。 |
srcset |
URL |
它定义了可用于不同情况的图像的URL。 (必需) |
type |
video/ogg video/mp4 video/webM audio/ogg audio/mpeg |
它确定MIME类型 |
src |
URL |
它指定图像的位置。 |
全局属性:
HTML <picture>标签支持HTML中的全局属性。
支持浏览器