Cara Menjadikan Gambar Agar Pas Dan Dapat Menyesuaikan Otomatis Dengan Lebar Halaman Posting

Bagaimana dengan gambar? Bagaimana jika dalam postingan yang diterbitkan memuat gambar yang memiliki dimensi cukup besar dan hanya optimal untuk ditampilkan pada peramban desktop saja? Apakah gambar yang terdapat dalam postingan juga dapat disetel supaya dapat ditampilkan secara responsif? Bisa jadi seperti itulah pertanyaan Anda apabila sebelum ini telah membaca artikel yang saya terbitkan sebelumnya, yaitu artikel yang mengulas tentang cara mengubah embed, object, dan iframe dalam postingan menjadi responsif.

Jadi seperti yang saya sampaikan dalam artikel tersebut bahwa apabila desain halaman yang responsif tidak diikuti dengan penayangan konten artikel yang responsif pula, maka hal ini sama saja seperti bohong. Hal tersebut disebabkan karena ketika halaman dibuka dengan memakai perangkat mobile yang memiliki lebar layar lebih kecil bila dibandingkan dengan object yang terdapat dalam badan artikel (dalam hal ini sebagai contoh misalnya adalah iframe), maka tampilan laman tidak lagi menjadi responsif dan perlu dilakukan ‘zoom’ terlebih dulu pada laman tersebut agar konten yang terdapat didalamnya dapat terbaca oleh mata pengguna.

Demikian pula dengan gambar, apabila dalam postingan memuat gambar yang memiliki dimensi cukup besar dan hanya optimal untuk ditampilkan pada peramban desktop, maka tentu saja tampilan laman tidak lagi menjadi responsif ketika dibuka dengan memakai perangkat yang lebar layarnya tidak lebih dari lebar gambar yang terdapat dalam postingan. Sehingga sebagai solusi untuk mengatasinya adalah dengan cara menjadikan gambar yang terdapat dalam postingan tersebut agar dapat menyesuaikan secara otomatis dengan berapapun ukuran lebar layar perangkat yang digunakan untuk membukanya. Dalam hal ini sebagai contoh misalnya adalah agar menyesuaikan secara otomatis dengan lebar layar smart phone, tablet pc, dan atau sejenisnya.

Seperti halnya mengubah embed, object, atau iframe yang terdapat dalam postingan menjadi responsif, maka cara yang paling mudah dan sederhana untuk menjadikan gambar dalam postingan menjadi responsif adalah dengan menambahkan CSS khusus dalam template. Karena dengan cara ini maka berapapun dimensi gambar yang disertakan dalam postingan secara otomatis akan menyesuiakan dengan ukuran yang telah ditentukan pada CSS-nya. Selanjutnya walaupun sebenarnya (menurut sepengetahuan saya) telah ada banyak artikel yang memberikan ulasan tentang cara membuat gambar menjadi responsif, akan tetapi di sini saya memiliki cara tersendiri yang dapat dibilang sangat simple karena CSS yang perlu ditambahkan sangatlah singkat dan juga sederhana. Dimana CSS yang dimaksud adalah seperti CSS di bawah ini.

.post-body img {max-width:98% !important;}

Perhatikan bahwa pada CSS di atas menggunakan .post-body img yang artinya bahwa CSS tersebut langsung ditujukan untuk mengatur ukuran gambar yang terdapat dalam artikel sehingga tidak akan berpengaruh terhadap gambar yang terdapat pada bagian yang lainnya. Dan perhatikan pula bahwa jika pada CSS tersebut menggunakan max-width:98% !important maka artinya adalah berapapun ukuran gambar yang terdapat dalam postingan ukurannya akan dibatasi maksimal selebar bidang artikel saja.  Sehingga jika dalam artikel terdapat gambar yang ukurannya tidak lebih dari lebar bidang posting, maka ukuran gambar adalah tetap dan jika terdapat gambar yang lebarnya melebihi bidang artikel maka ukurannya akan disesuaikan dengan persentase maksimal ukuran gambar yang telah ditentukan. Jadi apabila pemakaian 100% sebagai ukuran maksimal pada gambar masih dirasa cukup lebar, maka Anda dapat mengubahnya sesuai dengan ukuran yang sesuai (misal: 90%, 95%, atau ukuran lain yang sesuai).

Semoga berguna, bermanfaat, dan apabila Anda mengalami kesulitan saat mengimplementasikan teknik yang diuraikan dalam artikel ini, maka silakan poskan komentar untuk menyampaikan kendala atau permasalahan yang Anda alami.

Salam.