12 Maret 2014

Cara membuat gambar menjadi responsive 100%

Gambar adalah salah satu bagian penting dalam sebuah artikel, selain bisa membuat postingan lebih menarik, dengan gambar jugalah pembaca akan lebih mudah memahami sebuah tutorial karena melihat contoh secara langsung.
Alasan itulah yang membuat saya tertarik membuat gambar pada seluruh postingan menjadi responsive. Mulailah cari-cari informasi di internet dan dengan cepat saya dapatkan tutorialnya. Dari penjelasan yang saya dapatkan ternyata kita cukup menambahkan code img{max-width:100% !important;} pada media screen agar gambar bisa menyesuaikan ukurannya pada skala-skala tertentu. Tutorial berhasil, namun ada masalah yang saya temui.

Mengapa gambar hanya menyesuaikan ukuran lebarnya saja dan tidak menyesuaikan ukuran tinggi

Itulah masalah yang terjadi. Pada resolusi 600px keatas ukuran gambar memang tidak terlalu aneh, tapi pada resolusi 320px kebawah gambar mulai terlihat aneh. Lihat contoh dibawah.

Membuat gambar menjadi responsive

Gambar 1 adalah tampilan ketika saya menambahkan code img{max-width:100% !important;} pada media screen yang telah saya buat. Sebenarnya bukan code tersebut yang salah, kesalahan terjadi karena ukuran gambar pada postingan telah kita ubah sesuai keinginan kita. Ketika gambar di-upload kurang lebih code html gambar tersebut seperti dibawah ini.

<img src="http://3.bp.blogspot.com/-5w2xfeJbjNk/UyB8fMBXYBI/A/namagmbr.jpg"/>

contoh diatas adalah code html dari gambar yang telah di-upload pada ukuran standar/original size, tapi setelah ukuran gambar di ubah akan ada penambahan height dan width pada code tersebut yang kurang lebih seperti dibawah ini.

<img src="http://3.bp.blogspot.com/-5w2xfeJbjNk/UyB8fMBXYBI/A/namagmbr.jpg" height="280" width="670"/>

Inilah yang menjadi penyebabnya, biarkan gambar berada pada ukuran standarnya/original size, jika gambar melebar kekanan postingan, itu hanya ketika kita berada pada text editor sewaktu menulis saja, namun setelah dijalankan pada browser gambar akan menyesuaikan ukurannya dengan normal, artinya seimbang antara ukuran lebar dan tinggi gambar. Tapi ingat sebelum anda melakukan hal tersebut pastikan anda letakan code di bawah ini tepat diatas code ]]></b:skin>

img{width:auto;max-width:100%;}

Dengan adanya code diatas pada sederet code css anda, maka tidak perlu lagi penambahan code img pada media screen agar gambar menjadi responsive, karena gambar akan menyesuaikan sendiri ukurannya pada skala berapapun seperti Gambar 2 asal ukuran pada body postingan sudah responsive terlebih dahulu.

Jika menurut anda meskipun gambar tidak melebihi kapasitas dari body postingan tapi tetap saja ukuran gambar terlalu besar pada resolusi 1024px atau 1366px. Barulah code img boleh saja ditambahkan pada media screen seperti di bawah ini.

@media screen and (max-width:1366px){
img {width:auto;max-width:90%;}
}

Code diatas akan menampilkan gambar dengan ukuran 90% dari ukuran aslinya pada resolusi 1366px kebawah dan jika code sudah ditambahkan sebaiknya anda menambahkan lagi code img pada media screen max-width:480px atau pada max-width:320px dengan mengubah 90% menjadi 100% kembali, karena jika tidak gambar akan tampil 90% dari ukuran aslinya ketika diakses pada seluruh resolusi <= 1366px. tapi jika anda menambahkan kembali code img menjadi max-width:100% pada media screen max-width:480px maka logikanya "gambar akan ditampilkan dengan ukuran 90% pada seluruh resolusi <= 1366px kecuali pada resolusi 480px  ke bawah yang akan menampilkan gambar 100% dari ukurannya". Semoga bermanfaat.

Mungkin anda ingin membaca artikel dibawah :
  1. Cara membuat template standar dari blogger menjadi responsive
  2. Membuat menu navigasi responsive pada template standar blogger
  3. Cara menghilangkan google+ followers pada responsive design
  4. Mengapa responsive tidak bekerja pada template standar blogger
  5. Menghilangkan scroll pada responsive design
18 komentar :
  1. Terimakasih pak, bermanfaat. Dan berhasil :)
    Kunjungannya, http://merodja.blogspot.com/

    BalasHapus
    Balasan
    1. Sama-sama mas.... siap langsung ke TKP

      Hapus
    2. kalo untuk navigation yang fixed saat di scroling gimana itu pak ?

      Hapus
  2. makasih sharingnya mas Decky, saya sdh menerapkan trik ini dan sangat bermanfaat :)

    salam sukses :)

    BalasHapus
  3. Langsung praktek nij d blogspot ane . makasih gan

    BalasHapus
    Balasan
    1. Semoga gambar bisa menyesuaikan ukuran pada template responsive mas ranto, sama-sama gan.

      Hapus
  4. Balasan
    1. Silahkan mas. Semoga dapat diimplementasikan pada blog Anda.

      Hapus
  5. Terima kasih banyak mas decky
    gambar nya jadi responsive

    BalasHapus
  6. Terimakasih... keren....:)

    http://tebar.info/XzJ9m

    BalasHapus
    Balasan
    1. Terima kasih mas. Semoga cara ini bisa diimplementasikan pada blog Anda.

      Hapus
  7. blog saya pakai auto readmore, walaupun ukuran gambar terlihat lebih kecil di halaman beranda tapi faktanya ukuran berat gambar tetep original. punya solusi gak agar gambar auto readmore lebih responsive

    BalasHapus
  8. Maaf mas, Saya belum begitu mengerti pertanyaan Anda, bisa tolong sedikit diperjelas nggak...? maaf sebelumnya, atau bisa dikasih alamat blog-nya...

    BalasHapus
  9. saya sudah coba berkali kali tap tetap ga bisa tolong bantuan nya admin

    BalasHapus
    Balasan
    1. Pada postingan harus pilih htm dlu baru edit. Atau setelah upload gambar. Klik gambar tsb. Pilih original size

      Hapus

Jika ada artikel yang tidak Anda mengerti, maka gunakan fasilitas kotak komentar ini atau pada halaman kontak untuk menanyakannya.

Best Regard


Decky canser