Cara Membuat Gambar Renponsive di Postingan Blog

Jika Anda memposting gambar yang terlalu besar hingga melebihi batas konten blog lalu membukanya di browser lain maupun perangkat yang memiliki dimensi layar yang berbeda seperti smartphone, maka gambar yang Anda upload tadi akan tampak berantakan alias melebihi batas pinggiran blog sehingga hal ini sangat menganggu tampilan blog Anda. Inilah yang dinamakan gambar Anda tidak responsive.

Seperti yang terlihat pada gambar diatas, gambar yang ada dalam postingan melebihi batas lebar konten blog hingga menutupi/mengganggu sidebar.

Oleh karena itu disini saya akan sharing sedikit tips tentang Cara Membuat Gambar Renponsive di Postingan Blog. Cara ini adalah untuk mengatasi gambar yang tidak responsive dengan memberikan kode CSS.

Tips ini bisa Anda gunakan juga pada semua template blog.

1. Pertama masuklah ke dahsboard blog Anda lalu pilih Template > Edit HTML
2. Salin dan pastekan kode CSS dibawah ini tepat diatas kode ]]></b:sin> atau </style>

.post-body img {
  max-width:100%;
  height:auto;
}

3. Kemudian Anda simpan lalu coba buka salah satu postingan Anda dan lihat hasilnya.

Jika Anda melakukannya dengan benar, maka tampilan gambar di pontingan Anda akan terlihat seperti gambar dibawah ini.

Mudah bukan?
Semoga bermamfaat dan selamat mencoba :)