html picture属性,HTML picture标签

本文概述

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

标签包含一个或多个元素和一个元素。

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

此标记是HTML5中的新标记。

句法

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

Display

Inline

开始日期/结束日期

开始和结束标签

Usage

Image

例

Picture Tag

body{

text-align: center;

}

p{

font-size: bold;

font-size: 20px;

color: green;

}

Example of picture tag

Resize the page to see the different versions of the images at different viewports, and as per viewport image will be automatically changed.

立即测试

输出：

属性

特定于标签的属性：

属性

值

描述

media

media_query

它定义并接受可以在CSS中定义的任何媒体查询。

srcset

URL

它定义了可用于不同情况的图像的URL。 (需要)

type

视频/ ogg视频/ mp4视频/ webM音频/ ogg音频/ mpeg

它确定MIME类型

src

URL

它指定图像的位置。

全局属性：

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

支持的浏览器

Element

Chrome

IE

Firefox

Opera

Safari

Yes

No

Yes

Yes

Yes