HTML picture标签

本文概述

属性
支持的浏览器

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

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

根据视口, 将从不同的<source>标记加载匹配的图像, 如果没有源包含匹配的图像, 则<img>标记中存在的默认图像将显示在浏览器上。

此标记是HTML5中的新标记。

句法

<picture>
	<source srcset="" media="">
	<img src="">
</picture>

以下是有关HTML <picture>标签的一些规范

Display	Inline
开始日期/结束日期	开始和结束标签
Usage	Image

例

<!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	视频/ ogg视频/ mp4视频/ webM音频/ ogg音频/ mpeg	它确定MIME类型
src	URL	它指定图像的位置。