前端開(kāi)發(fā)人員使用 HTML 圖片標(biāo)簽來(lái)根據(jù)視口等首選項(xiàng)指定要在網(wǎng)頁(yè)上顯示的多個(gè)文件源。該標(biāo)簽允許Web開(kāi)發(fā)人員在響應(yīng)式網(wǎng)頁(yè)中指定多圖像源，并根據(jù)視口自動(dòng)選擇圖像，從而使網(wǎng)頁(yè)完美地填充源。我們可以在圖片標(biāo)簽中指定多個(gè)來(lái)源，網(wǎng)頁(yè)就會(huì)加載滿足偏好的圖片。圖片標(biāo)簽是 HTML 5 中引入的。

語(yǔ)法：

HTML中的圖片標(biāo)簽包含兩種類(lèi)型的標(biāo)簽，第一種是；它允許指定文件的來(lái)源，第二個(gè)是 ;允許在瀏覽器不支持的情況下指定要顯示的圖像的標(biāo)簽。標(biāo)簽。 的語(yǔ)法如下：標(biāo)簽如下，

<picture>
<source .>
.
.
<source .>
<img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543850795429.png" class="lazy" . alt="HTML 圖片標(biāo)簽" >
</source></source></picture>

圖片標(biāo)簽始終有一個(gè)結(jié)束標(biāo)簽，其中包含兩種類(lèi)型的標(biāo)簽，如上所述。 標(biāo)簽會(huì)根據(jù)資源數(shù)量出現(xiàn)多次，并且只有一個(gè) 。標(biāo)簽。源標(biāo)簽和圖像標(biāo)簽將具有不同的屬性，這些屬性將決定圖片標(biāo)簽的功能。

HTML 圖片標(biāo)簽的屬性

如前所述，圖片標(biāo)簽包含其他兩個(gè)標(biāo)簽 ;和。適用于這兩個(gè)標(biāo)簽的屬性將適用于圖片標(biāo)簽。

1.源

此屬性與 一起使用標(biāo)簽。該屬性允許指定要顯示的圖像的路徑或 URL。該字段是必需的，并且每當(dāng)使用源標(biāo)記時(shí)都需要指定。這樣我們就可以指定多個(gè)圖片來(lái)源。

2. srcset

此屬性可以與 一起使用或 標(biāo)簽，是 HTML 5 中的新屬性。該屬性與之前的“src”屬性類(lèi)似，但它允許我們定義更多值。該屬性接受兩個(gè)值作為輸入，第一個(gè)是文件的路徑或 URL，第二個(gè)是圖像的寬度描述符（如 (100w)）或圖像的像素密度描述符（如 (3x)）；每個(gè)后面分別跟著 w 和 x。

3.媒體

此屬性與 一起使用標(biāo)簽。該標(biāo)簽允許我們定義圖像的顯示規(guī)則。此屬性將任何媒體查詢作為輸入并應(yīng)用規(guī)則。媒體查詢可以檢查視口或設(shè)備大小或高度等

這樣，我們就可以使用該屬性和標(biāo)簽以及來(lái)實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。標(biāo)簽。

4.尺寸

此屬性可以與 一起使用和 標(biāo)簽。由于圖像將以默認(rèn)寬度顯示，因此該屬性允許我們根據(jù)媒體條件明確指定圖像的寬度。媒體條件是一個(gè)簡(jiǎn)單的條件，如“max-width: 800px”，沒(méi)有任何附加參數(shù)。圖片標(biāo)簽始終有一個(gè)結(jié)束標(biāo)簽，其中包含兩種類(lèi)型的標(biāo)簽，如上所述。 標(biāo)簽會(huì)根據(jù)資源數(shù)量出現(xiàn)多次，并且只有一個(gè) 。標(biāo)簽。源標(biāo)簽和圖像標(biāo)簽將具有不同的屬性，這些屬性將決定圖片標(biāo)簽的功能。 size 屬性可以接受多個(gè)這樣的媒體條件。這在響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中非常有用，我們可以設(shè)置條件并相應(yīng)地顯示圖像。

5.輸入

此屬性與 一起使用標(biāo)簽。該屬性允許我們顯式指定要顯示的文件的 MIME 類(lèi)型。

HTML 圖片標(biāo)簽示例

HTML 用于為 Web 開(kāi)發(fā)人員提供定義圖像資源的靈活性。?以下是 HTML 圖片標(biāo)簽的示例：

示例#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> 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/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543850795429.png" class="lazy" alt="HTML 圖片標(biāo)簽"   style="max-width:90%">
</source></source></picture>
</div>
</div>

輸出:

這里有三張不同分辨率的圖像。

在代碼中，我們指定了最小寬度媒體查詢來(lái)顯示圖像。運(yùn)行代碼后，嘗試調(diào)整瀏覽器大小，會(huì)根據(jù)寬度顯示不同的圖片。

寬度大于 550 像素：

寬度大于 465 px：

對(duì)于其他情況，即寬度小于 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> 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/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543851554073.png" class="lazy" alt="HTML 圖片標(biāo)簽" srcset="https://cdn.educba.com/HTML 圖片標(biāo)簽.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 圖片標(biāo)簽的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！