Artikel ini hanya sekedar panduan dasar saja yaitu bagaimana gambar bisa menjadi responsive pada blog. Untuk sobat yang blognya sudah menggunakan template responsive sobat tidak perlu melakukan apa-apa cukup upload gambar lalu publish, gambar pun langsung responsive menyesuaian dari perangkat mana blog anda di buka.
Membuat gambar/ bannner menjadi responsive ?
Kali ini saya akan menerapkan CSS3 murni untuk membuat gambar menjadi responsif. Penggunaan gambar dengan gaya dan ukuran global pun tetap gambar tersebut menjadi fit dalam layar dan menempati ruang yang tersedia. Dengan demikian, Gambar akan cukup terbaca di perangkat kecil.
Gambar-gamabr akan responsif pada semua resolusi layar seperti :
- Layar ponsel yang lebih kecil
- 320x480 - iPhone [Potret orientasi]
- 360x640 - Salah satu ponsel pintar
- 780X1024 - tablet yang lebih besar atau Desktop 17'
- desktop yang lebih besar
Sebelumnya, silahkan dulu untuk melihat demonya disini.
Selanjutnya klik icon perangkat di sudut kanan atas untuk melihat perubahan akan responsive gambar.
Lalu Bagaimana membuat gambar/ bannner menjadi responsive?
Baiklah kita mulai!
Pengkodean yang paling utama yaitu penggunaan
img. Taruh code CSS dibawah ini tepat dibawah kode <head> pada file HTML blog anda.<style type="text/css">
img {
width: 100%;
height: auto;
}
</style>Keterangan :
- Kenapa
img? Karenaimgadalah pemanggilan untuk semua gambar dalam berkas/file HTML yang ditulis dalam tanda kurung. - Penggunaan lebar saya menggunakan
width: 100%;dan tingginyaauto. Untuk kebutuhan tertentu kita bisa merubah lebar gambar mungkin sekitar 50% atau lebih kecil sesuai dengan resolusi layar.
Berikutnya tulis kode berikut setelah tag
<body> di file HTML.<img alt="Make Image responsive" height="90" src="images/728_90_panduan_blog.png" width="728" />
Sampai disini sebenarnya bila dilihat hasilnya sudah responsive. Namun ada kekurangannya, yaitu gambar ukuran seberapapun akan menyesuaikan lebar dari laya perangkat. Dalam artian bila gambar yang digunakan dengan ukuran lebarnya
728px dan dibuka dengan perangkat desktop maka gambar akan besar seukuran desktop sehingga gambar akan pecah.Untuk itu kita sedikit melakukan modifikasi pengkodean CSS yang nanti ukuran gambar yang tampil diperangkat sesuaikan dengan perintah pengkodean CSS.
Untuk melakukannya dengan menambahkan kode CSS ini :
.demo_1 { width: 300px; height: auto; }
@media(min-width: 500px) { .demo_1 { width: 468px; height: auto; } }
@media(min-width: 767px) { .demo_1 { width: 600px; height: auto; } }
@media(min-width: 1023px) { .demo_1 { width: 728px; height: auto; } }
Maka penggunaan agar gambar lebih responsive menggunakan kode
<div> seperti dibawah ini :<div class="demo_1">
<img alt="Make Image responsive" height="90" src="images/728_90_panduan_blog.png" width="728" />
</div>
Silahkan lihat kembali demonya disini.
Terima kasih telah bersedia membaca artikel ini, setiap saran atau pertanyaan silahkan posting di bagian komentar di bawah.
Tidak ada komentar:
Posting Komentar