HTML标签

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>
输出:
 HTML图片标签

属性:

标签专用属性:

属性 说明
media media_query 它定义并接受可以在CSS中定义的任何媒体查询。
srcset  HTML标签列表 URL 它定义了可用于不同情况的图像的URL。 (必需)
type video/ogg
video/mp4
video/webM
audio/ogg
audio/mpeg
它确定MIME类型
src URL 它指定图像的位置。

全局属性:

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

支持浏览器

标签  chrome浏览器  ie浏览器  firefox浏览器 Opera浏览器  Safari浏览器
<picture>
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4