HTMLの画像タグ
画像タグにより、プログラマーは画像処理の柔軟性を高めることができます。
画像タグの最も一般的な用途は、レスポンシブWebサイトのデザインです。表示画面サイズに応じて1枚の画像だけでズームイン・ズームアウトするのではなく、画面サイズに応じてサイズの異なる複数の画像を選択して表示し、見栄えを良くします。
pictureタグには、imgタグと1つ以上のソースタグの2種類のタグが含まれています。
ソースタグには次の属性があります。
- srcset（request）-表示する画像のURLを定義します。
- media-通常CSSで定義されている有効なメディアクエリを受け入れます。
- サイズ-表示される画像のサイズを決定します。
- タイプ-ファイルタイプを定義します。
ブラウザは属性値を使用して、最も適切な画像を読み込みます。属性に一致する最初のソースタグが使用されます。
imgタグは、pictureタグの最後の子タグになります。一致するソースタグがない場合は、imgタグが表示に使用されます。
使用する
例：この例では、pictureタグをsourceタグおよびimgタグと組み合わせて使用して、複数の画面サイズで表示されるレスポンシブページを作成します。
次の内容のhtmlファイルと同じレベルにある3つの画像black.jpg、yellow.jpg、blue.jpgを準備します。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>Học html miễn phí tại web888.vn</h1> <picture> <source media="(min-width: 800px)" srcset="black.jpg"> <source media="(min-width: 600px)" srcset="blue.jpg"> <img src="yellow.jpg" alt="Flowers" style="width:auto;"> </picture> </body> </html>ブラウザウィンドウのサイズを変更すると、画像のサイズが変化します。
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
