HTML 圖片標籤

前端開發人員使用 HTML 圖片標籤來根據視口等首選項指定要在網頁上顯示的多個文件來源。此標籤允許Web開發人員在響應式網頁中指定多圖像來源，並根據視口自動選擇圖像，從而使網頁完美地填充來源。我們可以在圖片標籤中指定多個來源，網頁就會載入滿足偏好的圖片。圖片標籤是 HTML 5 中引入的。

文法：

HTML中的圖片標籤包含兩種類型的標籤，第一種是；它允許指定檔案的來源，第二個是;允許在瀏覽器不支援的情況下指定要顯示的圖像的標籤。標籤。 的語法如下：標籤如下，

<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 圖片標籤" >
</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/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543850795429.png" 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/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543851554073.png" 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中文網其他相關文章！