Cara Cepat membuat responsive gambar dengan html5 - Syntax Blog

Header Ads

Cara Cepat membuat responsive gambar dengan html5

Masalah Pertama

Hari-hari fixed-width, pixel desain website yang sempurna baik dan benar-benar di belakang kami. Pada hari ini monitor layar lebar, TV internet, beberapa tablet berukuran dan ponsel pintar desain kami sekarang harus memenuhi segala sesuatu dari 320px lebar hingga berpotensi setinggi 7680px lebar.

Seiring dengan ini lanskap multi-resolusi datang kebutuhan untuk gambar untuk meregangkan atau mengecilkan sesuai persyaratan liar bervariasi. Hal ini dapat membuktikan menjadi sesuatu dari masalah mengingat bahwa, dengan pengecualian grafis vektor, sebagian besar gambar memiliki lebar berdasarkan pixel tertentu yang tidak berubah.

Anda ingin menggunakan code ini untuk solusi anda ? hahahah boleh juga tapi ada resikonya
jika anda menggunakan code ini gambar yang anda tampilkan akan terlilhat Skecth Jika di layar mobile ,..

Jadi apa yang kita lakukan?

Anda Bisa Menggunakan Tag <picture> Untuk Solusi dari masalah ini ,


Bagaimana <picture> bekerja ?

1. Buat pembukaan dan penutupan <picture> </ picture> tag.
2. Dalam tag tersebut, membuat <source> elemen untuk setiap query Anda ingin menjalankan.
3. Menambahkan atribut media yang berisi permintaan Anda pada hal-hal seperti ketinggian viewport, lebar, orientasi dll
4. Menambahkan atribut srcset dengan nama file gambar yang sesuai untuk memuat.
5. Tambahkan nama file tambahan untuk atribut srcset Anda jika Anda ingin menyediakan kepadatan pixel yang berbeda, misalnya Menampilkan retina.
6. Tambahkan fallback <img> elemen.

sekian tutorial dari syntax-x.blogspot.com semoga bisa menjadi wawasan agan agan blogger semua aahahahah :D

anda tertarik dengan otomotif ? dapatkan berita otomotif di otopromo.com

No comments:

Powered by Blogger.