Cara Mengubah Gambar Dengan Tag Picture HTML

Penggunaan elemen <picture> pada html berfungsi untuk menampilkan beberapa gambar yang berbeda berdasarkan lebar viewport atau layar. Elemen <picture> menyimpan dua tag berbeda yaitu satu atau lebih tag <source> dan satu tag <img>. Disini akan saya bahas elemen tag picture pada artikel tentang Cara Mengubah Gambar Dengan Tag Picture HTML.

Untuk dapat mengetahui Cara Mengubah Gambar Dengan Tag Picture HTML kita kenali terlebih dahulu fungsi dan cara penggunaannya.

Elemen <source> memiliki atribut yaitu:

srcset – mendefinisikan URL gambar untuk ditampilkan di halaman browser
media – menerima permintaan media apa pun yang valid yang biasanya akan ditentukan dalam CSS

Elemen <img> digunakan untuk menyediakan kompatibilitas untuk browser yang tidak mendukung elemen <picture>, atau jika tidak ada tag <source> yang cocok agar gambar tetap tampil di halaman browser.

Di bawah ini saya memiliki struktur html yang berisi elemen tag picture dengan 2 tag source dan satu tag img.

<!DOCTYPE html>
<html>
<head>
	<title>Cara Mengubah Gambar Dengan Tag Picture HTML</title>
</head>
<body>

<h1>Cara Mengubah Gambar Dengan Tag Picture HTML</h1>

<picture>
  <source media="(min-width: 650px)" srcset="Hydrangeas.jpg">
  <source media="(min-width: 465px)" srcset="Penguins.jpg">
  <img src="Tulips.jpg" alt="Flowers" style="width:200px;">
</picture>

</body>
</html>

Jika teman-teman perhatikan script di atas maka ketika kita lihat di halaman browser akan tampil 3 gambar yang berbeda berdasarkan lebar layar devicenya. Seperti pada gambar di bawah ini.

Berikut ini tampilan gambar pada ukuran layar di bawah 465px.

Dan gambar selanjutnya adalah gambar yang akan tampil pada ukuran layar minimal lebar 465px sampai 649px.

Dan terakhir adalah gambar yang tampil pada ukuran layar minimal lebar 650px dan lebih dari 650px.

Untuk width semua gambar saya atur dengan lebar 200px.

Demikian artikel tentang Cara Mengubah Gambar Dengan Tag Picture HTML. Teman-teman bebas memberikan tag source lebih banyak lagi, tai yang harus di ingat disini tag img harus satu saja di dalam elemen picture. Semoga artikel ini dapat bermanfaat buat teman-teman dan selamat mencoba.

Cara Mengubah Gambar Dengan Tag Picture HTML

Kategori