HTML picture标签 HTMLpicture标签|HTML5

本文概述

属性
支持的浏览器

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	它指定图像的位置。