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.

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.

 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.

 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 ]]>

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.