フロントエンド開発者は、HTML ピクチャ タグを使用して、ビューポートなどの設(shè)定に応じて Web ページに表示される複數(shù)のファイル ソースを指定します。このタグを使用すると、応答性の高い Web ページの Web 開発者が複數(shù)の畫像ソースを指定し、ビューポートに応じて畫像を自動(dòng)的に選択して、Web ページがソースで完全に埋められるようにすることができます。畫像タグで複數(shù)のソースを指定することができ、Web ページは好みを満たす畫像をロードします。 Picture タグは HTML 5 で導(dǎo)入されました。

構(gòu)文:

HTML のピクチャ タグには 2 種類のタグが含まれています。最初のタイプは です。これにより、ファイルのソースを指定できます。2 番目は です。ブラウザが をサポートしていない場合に表示する畫像を指定できるタグ。タグ。 の構(gòu)文は次のとおりです。タグは以下の通りです

<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>

前述のように、picture タグには必ず 2 種類のタグを含む終了タグが含まれます。 タグはリソースの數(shù)に応じて複數(shù)回來ますが、 は 1 つだけ存在します。タグ。ソース タグとイメージ タグには、ピクチャ タグの機(jī)能を決定する異なる屬性があります。

HTML 畫像タグの屬性

前述したように、picture タグは他の 2 つのタグ を保持します。と 。これら 2 つのタグに適用される屬性は、picture タグにも適用されます。

1.ソース

この屬性は とともに使用されます。タグ。この屬性を使用すると、表示する畫像のパスまたは URL を指定できます。このフィールドは必須であり、ソースタグが使用される場合は常に指定する必要があります。このようにして、畫像の複數(shù)のソースを指定できます。

2. srcset

この屬性は とともに使用できます。または この屬性は以前の「src」屬性に似ていますが、さらにいくつかの値を定義できるようになります。この屬性は入力として 2 つの値を受け取ります。1 つ目はファイルのパスまたは URL、2 つ目は畫像の幅記述子 (100w) または畫像のピクセル密度記述子 (3x) です。それぞれの後にはそれぞれ w と x が続きます。

3.メディア

この屬性は、 とともに使用されます。タグ。このタグを使用すると、畫像を表示するルールを定義できます。この屬性は、任意のメディア クエリを入力として受け取り、ルールを適用します。メディア クエリでは、ビューポート、デバイスのサイズ、高さなどを確認(rèn)できます。

このようにして、この屬性とタグを とともに使用してレスポンシブ デザインを?qū)g現(xiàn)できます。タグ。

4.サイズ

この屬性は とともに使用できます。 タグ。畫像はデフォルトの幅で表示されるため、この屬性を使用すると、メディアの狀態(tài)に応じて畫像の幅を明示的に指定できます。メディア條件は「max-width: 800px」のような追加パラメータのない単純な條件です。前述したように、ピクチャ タグには必ず 2 種類のタグを含む終了タグが含まれます。 タグはリソースの數(shù)に応じて複數(shù)回來ますが、 は 1 つだけ存在します。タグ。ソース タグとイメージ タグには、ピクチャ タグの機(jī)能を決定する異なる屬性があります。サイズ屬性は、このような複數(shù)のメディア條件を受け入れることができます。これは、條件を設(shè)定し、それに応じて畫像を表示できるため、レスポンシブ Web デザインで非常に役立ちます。

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> 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>

出力:

ここには、解像度の異なる 3 つの畫像があります。

コードでは、畫像を表示するための min-width メディア クエリを指定しました。コードを?qū)g行した後、ブラウザのサイズを変更してみてください。幅に応じて異なる畫像が表示されます。

幅が 550 ピクセルを超える場合:

幅が 465 ピクセルを超える場合:

その他の場合、つまり幅が 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畫像タグ" 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畫像タグの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。