Cara Membuat Image Responsive dengan Menggunakan CSS

Cara Membuat Image Responsive dengan Menggunakan CSS - Ada banyak cara atau teknik dalam membuat gambar menjadi responsive dan bervariasi tergantung dari tingkat dukungan browser. 

Cara Membuat Image Responsive dengan Menggunakan CSS


Pada tutorial kali 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>.

Cara Membuat Image Responsive dengan Menggunakan CSS







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.

Cara Membuat Image Responsive dengan Menggunakan CSS







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

Saya rasa artikel Cara Membuat Image Responsive dengan Menggunakan CSS sudah cukup lengkap dan jelas. Semoga bermanfaat. Pertanyaan, kritik maupun saran silahkan tulis di kolom komentar, apabila dirasa bermanfaat silahkan share artikel ini ya? Tq

Comments

Popular

Adakah Manfaat Mengirimkan Doa Al Fatihah Kepada Orang Yang Sudah Meninggal?

Ingin Cepat Kerja? Datang Saja Ke PT KPSG

Teknik Optimasi SEO Submit URL

Aplikasi Juz'Amma berbasis Website

Cara Pasang Iklan Google Adsense di Youtube Terbaru