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.
Terdapat 12 komentar pada artikel ini ▶
dengan begitu tidak ada gambar yang terpotong ya mas :)
@Kang UcupBetul sekali Sob. Karena lebar gambar telah dibatasi, maka tidak akan ada gambar yang melebihi lebar bidang posting karena gambar secara otomatis akan menyesuaikan dengan ukuran lebar bidang posting.
Mas maaf mau nanya. Saya membuat button pada postingan blog saya dengan menggunakan CSS+JavaScript. Dan yang ingin saya tanyakan adalah bagaimana cara membuat tampilan button tersebut responsive? Soalnya untuk web seluler tampilannya menjadi tidak sejajar seperti screen shot berikut https://docs.google.com/file/d/0BxQAsRbMOF9ULWVZUUxiNGg1ak0/edit . Dan berikut ini CSS yang saya gunakan pada button tersebut.
div#bynewz {
margin-top: 24px;
text-align:center;
}
input#bynewz1 {
width:120px;
background: #3e9cbf;
padding: 8px 14px 10px;
border:1px solid #3e9cbf;
cursor:pointer;
font-size:1em;
font-family:Oswald, sans-serif;
letter-spacing:.1em;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3);
color: #fff;
-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
input#bynewz1:hover, input#bynewz1:focus {
color:#dfe7ea;
-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
}
Mohon bantuannya. Terima kasih.
@Bynewz Putera PasundanBagaimana kalau ukuran yang dipakai pada width:120px; itu dijadikan dalam bentuk persen saja Sob. Sebab kalau ukurannya dijadikan persen, maka secara otomatis lebarnya akan menyesuaikan dengan lebar laman yang dipakai untuk menampilkan tombol tersebut.
@AYAHE MELABaik mas terima kasih atas bantuannya.
dimana saya harus meletakkan kode css yg mas berikan agar blog saya responsiv.
apakah blog saya yang mulai header-footer menggunkana gambar bisa responsiv, coba liat blog saya mas www.adittyaregas.blogspot.com
@Adittya RegasKode tersebut di atas dapat ditempatkan dalam area skin, Sob. Dalam hal ini bisa saja ditempatkan di atasnya ]]></b:skin>
Dan yang pasti dengan menambahkan CSS tersebut gambar yang responsive hanyalah gambar yang terdapat dalam postingan saja. :)
terima kasih,tutorialnya sangat membantu dan mudah diterapkan. hampir saja saya edit pos satu-persatu karena gambarnya rata-rata terpotong karena kebesaran. ternyata solusinya cuma nambahin CSS saja. sekali lagi terima kasih n semoga sukses selalu
@Aan Satriya Betul sekali Sob. Dengan menambahkan CSS yang terbilang sangat sederhana tersebut maka gambar yang terdapat dalam postingan menjadi responsif. Artinya berapapun dimensi gambar tersebut, dalam penayangannya tidak akan terpotong atau melebihi batas postingan.
Saya kenal saya yani. Mau nanya pak! Jadi gini saya punya blog toko online(belum jadi) saya sudah download tamplate online shop tapi pas mau posting gambar cuman kelihatan sebagian! Gimana agar foto produknya kelithatan semua kayak toko pedia/buka lapak? Terima kasih
@yani herayani Salam kenal juga Mbak/Bu. Apabila masalahnya seperti itu, maka solusi yang paling umum digunakan untuk memperbaikinya adalah dengan cara melakukan penyesuaian pada CSS template yang digunakan. Namun demikian karena masing-masing templa biasanya juga memiliki karakteristik yang berbeda, maka Si pembuat template lah yang mestinya lebih paham tentang bagaimana cara mengatasinya.
Membantu banget. Walaupun nggak 100% sama tapi alhamdulillah dari artikel ini bisa ketemu bagian mana yang perlu di fix. Thanks ya