HTML 图片标签

前端开发人员使用 HTML 图片标签来根据视口等首选项指定要在网页上显示的多个文件源。该标签允许Web开发人员在响应式网页中指定多图像源，并根据视口自动选择图像，从而使网页完美地填充源。我们可以在图片标签中指定多个来源，网页就会加载满足偏好的图片。图片标签是 HTML 5 中引入的。

语法：

HTML中的图片标签包含两种类型的标签，第一种是；它允许指定文件的来源，第二个是 ;允许在浏览器不支持的情况下指定要显示的图像的标签。标签。 的语法如下：标签如下，

<picture>
<source .>
.
.
<source .>
<img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543850795429.png?x-oss-process=image/resize,p_40" class="lazy" . alt="HTML 图片标签" >
</source></source></picture>

图片标签始终有一个结束标签，其中包含两种类型的标签，如上所述。 标签会根据资源数量出现多次，并且只有一个 。标签。源标签和图像标签将具有不同的属性，这些属性将决定图片标签的功能。

HTML 图片标签的属性

如前所述，图片标签包含其他两个标签 ;和。适用于这两个标签的属性将适用于图片标签。

1.源

此属性与 一起使用标签。该属性允许指定要显示的图像的路径或 URL。该字段是必需的，并且每当使用源标记时都需要指定。这样我们就可以指定多个图片来源。

2. srcset

此属性可以与 一起使用或 标签，是 HTML 5 中的新属性。该属性与之前的“src”属性类似，但它允许我们定义更多值。该属性接受两个值作为输入，第一个是文件的路径或 URL，第二个是图像的宽度描述符（如 (100w)）或图像的像素密度描述符（如 (3x)）；每个后面分别跟着 w 和 x。

3.媒体

此属性与 一起使用标签。该标签允许我们定义图像的显示规则。此属性将任何媒体查询作为输入并应用规则。媒体查询可以检查视口或设备大小或高度等

这样，我们就可以使用该属性和标签以及来实现响应式设计。标签。

4.尺寸

此属性可以与 一起使用和 标签。由于图像将以默认宽度显示，因此该属性允许我们根据媒体条件明确指定图像的宽度。媒体条件是一个简单的条件，如“max-width: 800px”，没有任何附加参数。图片标签始终有一个结束标签，其中包含两种类型的标签，如上所述。 标签会根据资源数量出现多次，并且只有一个 。标签。源标签和图像标签将具有不同的属性，这些属性将决定图片标签的功能。 size 属性可以接受多个这样的媒体条件。这在响应式网页设计中非常有用，我们可以设置条件并相应地显示图像。

5.输入

此属性与 一起使用标签。该属性允许我们显式指定要显示的文件的 MIME 类型。

HTML 图片标签示例

HTML 用于为 Web 开发人员提供定义图像资源的灵活性。 以下是 HTML 图片标签的示例：

示例#1

代码：

<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<title>
picture tag in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>


<div class="results">
<h2 id="picture-tag-in-HTML"> picture tag in HTML </h2>
<span> Resize the browser to see the effect.. </span>
<div class="resultText">
<picture>
<source media="(min-width: 550px)" srcset="https://cdn.educba.com/triangle.png">
<source media="(min-width: 465px)" srcset="https://cdn.educba.com/rectangle.png">
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543850795429.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML 图片标签"   style="max-width:90%">
</source></source></picture>
</div>
</div>

输出:

这里有三张不同分辨率的图像。

在代码中，我们指定了最小宽度媒体查询来显示图像。运行代码后，尝试调整浏览器大小，会根据宽度显示不同的图片。

宽度大于 550 像素：

宽度大于 465 px：

对于其他情况，即宽度小于 465px：

Note, the outer border of the images clarifies the resolution of images. In most of the cases, all these images will be the same but with different resolutions.

Example #2

Code:

<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<title>
picture tag in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
.img {
max-width: 100%;
}
</style>


<div class="results">
<h2 id="picture-tag-in-HTML"> picture tag in HTML </h2>
<span> Resize the browser to see the effect.. </span>
<div class="resultText">
<picture>
<source media="(min-width: 550px)" srcset="https://cdn.educba.com/triangle.png">
<source media="(min-width: 465px)" srcset="https://cdn.educba.com/rectangle.png">
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543851554073.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML 图片标签" srcset="https://cdn.educba.com/HTML 图片标签.png 2000w" sizes="900vw"   style="max-width:90%">
</source></source></picture>
</div>
</div>

Output:

Here, we have used the attribute size with the tag. The maximum width of an image is limited by using CSS first, but these sizes attribute, along with srcset, forces to use the width depending on the size specified in terms of the viewport.

Conclusion

Web developers use HTML picture tag in responsive web page designing. This tag consists of two child tags source and img. Using different attributes available for these tags makes it possible to display images dynamically depending on the conditions.

以上是HTML 图片标签的详细内容。更多信息请关注PHP中文网其他相关文章！