Tag Gambar HTML

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 yang membenarkan menentukan sumber fail, dan yang kedua ialah teg yang membenarkan menentukan imej untuk dipaparkan sekiranya penyemak imbas tidak menyokong tag. Sintaks tag adalah seperti di bawah,

<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="Tag Gambar HTML" >
</source></source></picture>

Teg gambar akan sentiasa mempunyai teg penutup dengan dua jenis teg di dalamnya, seperti yang dinyatakan. teg akan datang berbilang kali bergantung pada bilangan sumber dan hanya akan ada satu tag. Teg sumber dan imej akan mempunyai atribut berbeza yang akan menentukan kefungsian tag gambar.

Atribut Tag Gambar HTML

Seperti yang dinyatakan, tag gambar memegang dua teg lain dan . Atribut yang digunakan pada kedua-dua tag ini akan digunakan pada tag gambar.

1. src

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.

2. srcset

Atribut ini boleh digunakan dengan atau teg dan baharu dalam HTML 5. Atribut ini serupa dengan atribut "src" sebelumnya, tetapi ia membolehkan kami mentakrifkan beberapa nilai lagi. Atribut ini mengambil dua nilai sebagai input, pertama ialah laluan atau URL fail, dan kedua ialah sama ada deskriptor lebar imej seperti (100w) atau deskriptor ketumpatan piksel bagi imej seperti (3x); masing-masing diikuti oleh w dan x masing-masing.

3. media

Atribut ini digunakan bersama-sama dengan tag. Teg ini membolehkan kami mentakrifkan peraturan untuk memaparkan imej. Atribut ini mengambil sebarang pertanyaan media sebagai input dan menggunakan peraturan. Pertanyaan media boleh menyemak port pandangan atau saiz atau ketinggian peranti, dsb.

Dengan cara ini, kita boleh mencapai reka bentuk responsif menggunakan atribut dan teg ini bersama-sama dengan tag.

4. saiz

Atribut ini boleh digunakan dengan dan tag. Memandangkan imej akan dipaparkan dengan lebar lalai, atribut ini membolehkan kami menentukan lebar imej secara eksplisit bergantung pada keadaan media. Syarat media ialah syarat mudah seperti "lebar maksimum: 800px" tanpa sebarang parameter tambahan. Teg gambar akan sentiasa mempunyai teg penutup dengan dua jenis teg di dalamnya, seperti yang dinyatakan. teg akan datang berbilang kali bergantung pada bilangan sumber dan hanya akan ada satu tag. Teg sumber dan imej akan mempunyai atribut berbeza yang akan menentukan kefungsian tag gambar. Atribut saiz boleh menerima lebih daripada satu syarat media seperti ini. Ini sangat berguna dalam reka bentuk web responsif, di mana kami boleh menetapkan syarat dan memaparkan imej dengan sewajarnya.

5. taip

Atribut ini digunakan bersama-sama dengan tag. Atribut ini membolehkan kami menentukan secara eksplisit jenis MIME fail yang akan dipaparkan.

Contoh Tag Gambar HTML

HTML digunakan untuk memberi pembangun web kefleksibelan untuk menentukan sumber imej. Di bawah ialah contoh Tag Gambar HTML:

Contoh #1

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 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="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.

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="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.

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.

Atas ialah kandungan terperinci Tag Gambar HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!