Cara Agar Gambar/Banner Jadi Responsive di Blog
Cara membuat Image thumbnail (Gambar) atau Banner jadi Responsive di situs web Anda - Tutorial ini memandu sobat untuk menciptakan sebuah gambar pilihan Anda menjadi responsive HTML5 di blog anda. Dengan menggunakan perintah CSS sederhana kita melakukannya ini semua. Sobat tidak perlu dengan penggunaan JavaScript maupun plugin jQuery jadi sobat hanya memerlukan sedikit pengkodean CSS sehingga gambar menjadi responsif.
Artikel ini hanya sekedar panduan dasar saja yaitu bagaimana agar gambar menjadi responsive pada blogger. Untuk sobat yang blognya sudah menggunakan template responsive sobat tidak perlu melakukan apa-apa cukup upload gambar lalu publish, gambar pun langsung responsive di blog sobat dengan menyesuaian ukuran perangkat.
Cara 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 thumbnail akan cukup terbaca di perangkat kecil.
Gambar-gambar akan responsif pada semua resolusi layar jika blog sobat di buka melalui perangkat 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
Lalu Bagaimana membuat gambar/ bannner menjadi responsive?
Baiklah kita mulai caranya!
1. 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 ? Karena img adalah pemanggilan untuk semua gambar dalam berkas/file HTML yang ditulis dalam tanda kurung.
Penggunaan lebar saya menggunakan width: 100%; dan tingginya auto. Untuk kebutuhan tertentu kita bisa merubah lebar gambar mungkin sekitar 50% atau lebih kecil sesuai dengan resolusi layar.
2. 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 gambar 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>
Terima kasih telah bersedia membaca artikel ini, setiap saran atau pertanyaan silahkan posting di bagian komentar di bawah.