Membuat Gambar Responsive Dengan CSS

Ada banyak cara atau teknik dalam membuat gambar menjadi responsive dan bervariasi tergantung dari tingkat dukungan browser. Pada tutorial dumet blog ini saya akan memberikan dasar dalam membuat gambar menjadi responsive artinya gambar akan menyesuaikan dengan besarnya viewport atau layar ketika pengguna mengakses sebuah website. Mari kita mulai dengan contoh yang sederhana. Saya telah memiliki elemen <div> yang bertindak sebagai wadah atau sebuah container dari elemen <img>.

Code CSS diatas menjelaskan container memiliki properti lebar 96% dan mempunyai nilai margin auto. Memiliki max-lebar 960px sehingga tata letak akan berada di posisi tengah. Kemudian elemen <Img> dalam container memiliki properti lebar 100% sehingga lebarnya selalu sama dengan container dan akan menyesuaikan layar monitor, sehingga membuat sebuah gambar menjadi responsive. Ketinggian set ke auto sehingga gambar akan otomatis proporsional.

Perhatikan bahwa <img> elemen akan terlihat responsive dimana kita telah memberikan lebar dan tinggi attibute HTML dalam markup (yaitu width = "960" height = "640").

Sekian Blog hari ini. Selamat Mencoba, Terima Kasih