Cara membuat gambar di artikel menjadi responsive. Gambar pada artikel sebuah situs web/blog adalah salah satu alat untuk menjelaskan kepada pembaca, agar lebih mudah dalam memahami sebuah artikel. Tampilan gambar pada situs desktop dengan tampilan pada mobile tentunya berbeda dalam hal ukuran.
Untuk membuat gambar tersebut mobile friendly, maka tampilan gambar harus dibuat responsive. Artinya gambar tersebut akan menyesuaikan sendiri ukurannya apabila diakses dengan perangkat yang berbeda seperti Hape, tablet, ataupun dengan layar monitor.
Problem Gambar tidak Responsive
Sebuah gambar tidak akan tampil responsive apabila tidak diatur pada settingan tema/template blog/web. Maka, untuk mebuat sebuah gambar menjadi responsive, tambahkan kode simpel berikut ini:
.post-body img{display:block;width:100%;height:auto;}Penempatan kode
Dimana meletakkan kode diatas? Letakkan kode diatas diatas kode ]]></b:skin> untuk blogger template. Saya sendiri meletakkan kode tersebut dibawah kode ini: .post amp-img{max-width:100%;height:auto;padding:.1em;margin:0 auto}
Sebelum dan Sesudah
Berikut tampilan gambar, sebelum dan sesudah diperbaiki. Gambar yang sebelumnya tidak responsive, akhirnya menjadi responsive menyesuaikan ukuran perangkat yang digunakan untuk mengakses.
Silahkan dicoba!! Berhasil membuat gambar di artikel menjadi responsive??
Posting Komentar