Cara Membuat Gambar Responsive
di Postingan Blog - Beberapa hari yang lalu Saya sempat galau, pasalnya gambar dalam postingan blog tidak terlihat responsive.
Hal ini disebabkan karena gambar dalam postingan yang diterbitkan memuat gambar yang memiliki dimensi cukup besar dan hanya optimal untuk ditampilkan pada peramban desktop saja. Namun ketika halaman dibuka menggunakan perangkat mobile yang notabene memiliki layar lebih kecil, maka tampilan gambar melebar melewati kolom artikel.
Untuk mengatasi gambar yang melewati batas lebar halaman posting agar dapat menyesuaikan secara otomatis, Saya mencoba menggunakan kode CSS seperti pada artikel Mbak Arlina
Setelah Saya terapkan pada template, ternyata gambar pada postingan blog saya masih tetap seperti semula tanpa perubahan. Dalam kebingungan akhirnya saya coba bereksperimen sendiri. Berkat kesabaran dan keuletan akhirnya saya berhasil. :D
Bagi yang mempunyai masalah sama dengan Saya, bisa Anda coba menggunakan cara ini. Dan berikut ini cara mengatasinya.
Silahkan buka blog Anda > Template > Edit HTML > Cari CSS Post Wrapper, Setelah ketemu hapus kode di bawah ini:
.post-body img {max-width:95%;margin:0 auto;height:auto;}
Kemudian ganti dengan kode berikut:
.post-body img { max-width : 90% ! important ;}
Kemudian simpan perubahan dan lihat hasilnya.
Perhatikan pada CSS tersebut menggunakan max-width:90% !important artinya adalah berapapun ukuran gambar yang terdapat dalam postingan, ukurannya akan dibatasi maksimal selebar bidang artikel saja. Anda dapat mengubahnya sesuai dengan ukuran template yang anda gunakan (misal: 95%, 98%, atau ukuran lain). Namun perlu diingat bahwa cara ini tidak berlaku pada gambar Add Caption.
Nah, itulah sedikit pengalaman saya dalam mengatasi gambar dalam postingan yang tidak responsive.
Demikianlah untuk postingan yang masih jauh dari sempurna ini. Jika ada bagian atau kata-kata yang salah, anda bisa menuliskan saran dan kritikan pada kolom komentar di bawah.
Anda juga dapat melihat artikel saya
mengenai cara menyimpan dan berbagi file Google Drive
Terima kasih telah membaca artikel ini, selamat mencoba, dan semoga bermanfaat...
