Tag <gambar> HTML
Contoh
Cara menggunakan tag <gambar>:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Definisi dan Penggunaan
Tag <picture>memberi pengembang web lebih banyak fleksibilitas dalam menentukan sumber daya gambar.
Penggunaan <picture>elemen yang paling umum adalah untuk arah seni dalam desain responsif. Alih-alih memiliki satu gambar yang diperbesar atau diperkecil berdasarkan lebar viewport, beberapa gambar dapat dirancang untuk mengisi viewport browser dengan lebih baik.
Elemen tersebut <picture>berisi dua tag: satu atau lebih
tag <source> dan satu tag <img> .
Browser akan mencari elemen <source> pertama di mana kueri media cocok dengan lebar area pandang saat ini, dan kemudian akan menampilkan gambar yang sesuai (ditentukan dalam atribut srcset). Elemen <img> diperlukan sebagai anak terakhir dari <picture>elemen, sebagai opsi mundur jika tidak ada tag sumber yang cocok.
Tip: Elemen ini <picture>berfungsi "mirip" dengan <video> dan <audio>. Anda mengatur sumber yang berbeda, dan sumber pertama yang sesuai dengan preferensi adalah yang digunakan.
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung elemen tersebut.
| Element | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
Atribut Global
Tag <picture>juga mendukung Atribut Global dalam HTML .
Atribut Acara
Tag <picture>juga mendukung Atribut Peristiwa dalam HTML .
Halaman Terkait
Tutorial HTML: Elemen <gambar> HTML
Tutorial CSS: Desain Responsif CSS - Gambar