Membuat Galeri Foto Responsif Dengan CSS

Kelasmaster.com – Galeri foto maupun gambar bisa dibuat responsif. Responsif maksudnya bisa dan mudah serta enak dipandang dari segala perangkat yang ada baik smartphone, tablet maupun laptop. Ternyata membuat galeri foto bisa dibuat secara responsif hanya dengan bantuan CSS.

Pada contoh demo secara langsung ini screen seharusnya lebih tinggi resolusinya yakni di atas 700px lebarnya. Ukuran akan terlihat berbeda bila diakses dengan resolusi lebih kecil 500px dan berdiri sendiri secara verikal. Dalam hal ini penulis menggunakan laptop atau desktop browser jadi galeri foto ini terlihat merata ke samping secara horizontal.

Membuat galeri foto/gambar responsif ini hanya memerlukan polesan CSS, jadi mudah diterapkan di mana saja. Berikut kodenya:

Sudah diterangkan soal media screen yang mengatur resolusi lebar dari suatu gambar. Berikutnya adalah menyisipkan kode HTML berikut keterangan foto dan link yang dituju. Untuk kodenya bisa langsung lihat dan praktekan di blog yang Anda kelola.

Pada file foto sebaiknya berukuran seragam, begitu pula pada keterangan deskripsi dari foto agar terlihat rapi. Silahkan terbitkan dan lihatlah perubahan yang terjadi, Sekarang Anda sudah dapat membuat galeri foto atau gambar secara responsif hanya dengan bantuan CSS saja. Selamat mencoba.