Pada kesempatan kali ini saya akan menjelaskan cara menambahkan attribute class bootstrap img-responsive dengan javascript. Perlu teman-teman ketahui sebelumnya, fungsi class bootstrap img-responsive dimana adalah untuk menyesuaikan gambar di berbagai resolusi layar sehingga tampilan gambar tetap responsive atau tetap rapih dalam kondisi apapun di setiap resolusi layar.Tidak hanya itu, berikut class bootstrap yang bisa di terapkan pada gambar yang bisa digunakan untuk menata gambar apapun:

  • .img-rounded dimana fungsi class tersebut adalah untuk menambahkan sudut yang membulat ke gambar (tidak tersedia di IE8).
  • .img-circle dimana fungsi class tersebut adalah untuk membentuk gambar ke lingkaran (tidak tersedia di IE8).
  • .img-thumbnail dimana fungsi class tersebut adalah untuk membentuk gambar ke ukuran thumbnail (kecil)
  • .img-responsive dimana fungsi class tersebut adalah untuk membuat gambar responsif (akan berskala dengan baik ke elemen induk) di berbagai resolusi layar

Seperti yang terlihat pada class .img-responsive tersebut, dimana teman-teman bisa memanfaatkan class tersebut untuk membuat gambar artikel yang ada di website teman-teman menjadi lebih responsive di berbagai ukuran resolusi layar, dan mungkin sebelumnya teman-teman sudah tahu, untuk membuat gambar menjadi responsive di html cukup memasukan class img-responsive tersebut secara manual di kode html. Namun pada contoh kasus di sini, gambar yang saya dapatkan berasal dari text editor WSYIWYG (What You See Is What You Get), dimana ketika teman-teman memasukan gambar dari fasilitas text editor tersebut maka gambar yang dihasilkan belum responsive ketika di buka di template front-end website teman-teman, namun tidak usah khawatir karena untuk menambahkan class bootstrap img-responsive tersebut teman-teman bisa menambahkannya menggunakan javascript.

Berikut Tahapannya :

  • Buka file index.php yang ada di folder project teman-teman
  • Jika sudah tambahkan kode javascript di bawah kode </html> template teman-teman, seperti kode di bawah ini :

  • Seperti yang terlihat pada kode di atas, secara otomatis akan menambahkan class img-responsive pada gambar yang ada di artikel website teman-teman.

Sampai disini penjelasan saya mengenai cara menambahkan attribute class bootstrap img-responsive dengan javascript, semoga bermanfaat.