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.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 :
Terimakasih pak, bermanfaat. Dan berhasil :)
BalasHapusKunjungannya, http://merodja.blogspot.com/
Sama-sama mas.... siap langsung ke TKP
Hapuskalo untuk navigation yang fixed saat di scroling gimana itu pak ?
HapusMaksudnya gimana mas?
Hapusmakasih sharingnya mas Decky, saya sdh menerapkan trik ini dan sangat bermanfaat :)
BalasHapussalam sukses :)
Sama-sama mba indri.. salam sukses
HapusLangsung praktek nij d blogspot ane . makasih gan
BalasHapusSemoga gambar bisa menyesuaikan ukuran pada template responsive mas ranto, sama-sama gan.
HapusCoba dulu ya
BalasHapusSilahkan mas. Semoga dapat diimplementasikan pada blog Anda.
HapusTerima kasih banyak mas decky
BalasHapusgambar nya jadi responsive
Terima kasih, sama-sama mas.
HapusTerimakasih... keren....:)
BalasHapushttp://tebar.info/XzJ9m
Terima kasih mas. Semoga cara ini bisa diimplementasikan pada blog Anda.
Hapusblog 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
BalasHapusMaaf mas, Saya belum begitu mengerti pertanyaan Anda, bisa tolong sedikit diperjelas nggak...? maaf sebelumnya, atau bisa dikasih alamat blog-nya...
BalasHapussaya sudah coba berkali kali tap tetap ga bisa tolong bantuan nya admin
BalasHapusPada postingan harus pilih htm dlu baru edit. Atau setelah upload gambar. Klik gambar tsb. Pilih original size
Hapus