srcmini本文概述
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 | 它指定图像的位置。 |
全局属性：
HTML <picture>标签支持HTML中的全局属性。
支持的浏览器
| Element | Chrome | IE | Firefox | Opera | Safari |
| <picture> | Yes | No | Yes | Yes | Yes |
评论前必须登录！
注册