Pembangun bahagian hadapan menggunakan tag gambar HTML untuk menentukan lebih daripada satu sumber fail untuk dipaparkan pada halaman web bergantung pada keutamaan seperti port pandang. Teg ini membenarkan pembangun web dalam halaman web responsif untuk menentukan sumber berbilang imej dan memilih imej secara automatik bergantung pada port pandangan supaya halaman web akan diisi dengan sempurna dengan sumber. Kami boleh menentukan berbilang sumber dalam tag gambar, dan halaman web akan memuatkan imej yang memenuhi keutamaan. Tag gambar diperkenalkan dengan HTML 5.
Sintaks:
Teg gambar dalam HTML mengandungi dua jenis teg di dalamnya, jenis pertama ialah
<picture> <source .> . . <source .> <img . alt="Tag Gambar HTML" > </source></source></picture>
Teg gambar akan sentiasa mempunyai teg penutup dengan dua jenis teg di dalamnya, seperti yang dinyatakan.
Seperti yang dinyatakan, tag gambar memegang dua teg lain
Atribut ini digunakan bersama-sama dengan tag. Atribut ini membenarkan menentukan laluan atau URL imej yang akan dipaparkan. Medan ini diperlukan dan perlu dinyatakan apabila teg sumber digunakan. Dengan cara ini, kami boleh menentukan berbilang sumber untuk imej.
Atribut ini boleh digunakan dengan
Atribut ini digunakan bersama-sama dengan
Dengan cara ini, kita boleh mencapai reka bentuk responsif menggunakan atribut dan teg ini bersama-sama dengan
Atribut ini boleh digunakan dengan
Atribut ini digunakan bersama-sama dengan
HTML digunakan untuk memberi pembangun web kefleksibelan untuk menentukan sumber imej. Di bawah ialah contoh Tag Gambar HTML:
Kod:
<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="Tag%20Gambar%20HTML.png" alt="Tag Gambar HTML" style="max-width:90%"> </source></source></picture> </div> </div>
Output:
Di sini kami mempunyai tiga imej dengan peleraian berbeza.
Dalam kod, kami telah menentukan pertanyaan media lebar min untuk memaparkan imej. Selepas menjalankan kod, cuba ubah saiz pelayar dan imej yang berbeza akan dipaparkan bergantung pada lebarnya.
Untuk Lebar Lebih daripada 550 px:
Untuk Lebar Lebih daripada 465 px:
Untuk Kes Lain, iaitu lebar kurang daripada 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.
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="Tag%20Gambar%20HTML.png" alt="Tag Gambar HTML" srcset="https://cdn.educba.com/Tag Gambar 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.
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.
Atas ialah kandungan terperinci Tag Gambar HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!