HTML 教程

HTML 属性

HTML 标签列表

HTML API

HTML 案例

HTML 颜色

HTML5 进阶

HTML 其它

HTML 面试问题

HTML <picture> 标签

HTML <picture> 标签用于响应式网页设计，我们需要根据它们的视口、高度、宽度、方向和像素密度加载不同的图像。

<picture> 标签包含一个或多个 <source> 元素和一个 <img> 元素。

根据视口，匹配的图像将从不同的 <source> 标签加载，如果没有源包含匹配的图像，则 <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 图片标签

属性：

特定于标签的属性：

属性属性值描述
mediamedia_query它定义并接受任何可以在 CSS 中定义的媒体查询。
srcsetHTML 标签列表URL它定义了可用于不同情况的图像的 URL。（必需的）
typevideo/ogg
video/mp4
video/webM
audio/ogg
audio/mpeg		它确定 MIME 类型
srcURL它指定图像的位置。

全局属性：

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

支持浏览器

元素ChromeIEFirefoxSafariOpera
<picture>YesYesYesYesYes


上一主题 HTML <param> 标签 下一主题 HTML <pre> 格式化文本标签
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具