HTML画像タグ

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

構文:

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

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

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

HTML 画像タグの属性

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

1.ソース

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

2. srcset

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

3.メディア

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

このようにして、この属性とタグを とともに使用してレスポンシブ デザインを実現できます。タグ。

4.サイズ

この属性は とともに使用できます。 タグ。画像はデフォルトの幅で表示されるため、この属性を使用すると、メディアの状態に応じて画像の幅を明示的に指定できます。メディア条件は「max-width: 800px」のような追加パラメータのない単純な条件です。前述したように、ピクチャ タグには必ず 2 種類のタグを含む終了タグが含まれます。 タグはリソースの数に応じて複数回来ますが、 は 1 つだけ存在します。タグ。ソース タグとイメージ タグには、ピクチャ タグの機能を決定する異なる属性があります。サイズ属性は、このような複数のメディア条件を受け入れることができます。これは、条件を設定し、それに応じて画像を表示できるため、レスポンシブ 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 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>

出力:

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

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

幅が 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 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 中国語 Web サイトの他の関連記事を参照してください。